Como posso fazer um img e link de texto ambos apontam para o mesmo lugar e ambos se tornam ativas em foco independente de qual deles eu estou pairando sobre?

Question

Eu gostaria de ser capaz de ter a pairar sobre a imagem invocar a propriedade foco no link de texto também que está ao lado dele.

Eu tenho uma visualização da imagem de um vídeo eo nome do vídeo escrito ao lado dele como cadeia de texto. Eu gostaria de fazê-lo para que eu possa pairar sobre a imagem e tornar o texto ainda mudam de cor como um efeito hover sem ter que fazer a imagem eo texto todo uma imagem, por razões de busca e usabilidade óbvias; manter o texto como texto etc.

UPDATE: Eu também quero ter certeza que o link de texto que está agora no "span" não pode simplesmente mover sobre o uso de "margin-left", mas pode ser levantado. Por padrão no código que eu tenho apenas cai para o nível da parte inferior da imagem 60x60px. Eu quero isso mais para cima de modo que parece bom, mas "margin-bottom" não ajuda que. eu quero-o na "altura Center" da 60x60 img ... não, na parte inferior do mesmo para onde vai, por padrão.

todas as idéias? obrigado!

P.S. Estou aberto para o script java e jQuery ideias alguns publicados aqui, mas eu sou um novato completo para isso e terá explicação extra. Eu prefiro CSS.

meu código agora é:

meu html é:

<div id="example">
  <a href="#">
    <img src="image/source_60x60px.jpg">
    <span class="video_text">Image Text</span>
  </a>
</div> 

meu CSS é:

div#example         { float:left; width:358px; height:60px; margin-top:20px; }   
div#example a       { color:#B9B9B9; width:100%;}  
div#example a:hover { color:#67a; text-decoration:none;}  
span.videotext      { margin-left:80px;} 

Answer 1

Você poderia fazer isso com CSS, ou com Javascript. Sem saber a sua marcação, e como seus elementos são colocados para fora, não é possível determinar qual é a melhor opção.

CSS Opção

a:hover span { color:red; }
<a href="1.html">
  <img src="1.jpg" />
  <span>Title: One</span>
</a>

Nesse exemplo, temos o nosso texto e imagem, tanto dentro de um link. Estamos, então, modificar a cor do texto no:. Evento pairar

Javascript (jQuery)

div.hovered p { color:red; }

<div class="preview">
  <img src="1.jpg" />
  <p>Title: One</p>
</div>

$("div.preview img").hover(
  function () { $(this).parent().addClass("hovered"); },
  function () { $(this).parent().removeClass("hovered"); }
);

Este exemplo apresenta uma solução que simplesmente adiciona uma classe para o contentor principal, que por sua vez altera a representação do título. Este evento é controlado por pairando a imagem dentro do recipiente.

Update:

Posicionar o texto não é tão difícil. O método rápido e fácil seria para posicionar o recipiente pai com relativa, e o texto com absoluta:

<div class="container">
  <a href="#">
    <img src="1.jpg" />
    <span class="title">Hello World</span>
  </a>
</div>

div.container            { position:relative; width:150px; }
div.container span.title { position:absolute; top:0; left:50px; width:100px; }

Isso é um exemplo rápido. Você pode modificar os valores para suas necessidades.

Answer 2

E

<style>
a 
{ 
    color: #000000; 
}
a:hover 
{ 
    color: #a9a9a9; 
}
</style>

<a href="#"><img src="imagepath" alt="Image Title" />&nbsp;Image Text</a>

Answer 3

Com base na resposta de Jonathan, mas para javascript se você não usar jQuery:

<div onmousemove="hover('text1',true)" onmouseout="hover('text1',false)" >
  <img src="1.jpg" />
  <p id="text1">Title: One</p>
</div>

<script type="text/javascript">
function hover(elemID, on){
  element = document.getElementById(elemID);  
  if(on){
    element.style.color='red';
  }
  else
  {
    element.style.color='black';
  }
}
</script>

Answer 4

As minhas desculpas. I mis-ler sua pergunta. Aqui é outra facada nele:

HTML

<div class="video">
    <a href="" title="title">
        <img alt="title" src="path/to/image" />
        Video Title
    </a>
</div>

CSS

    .video {
        line-height: 75px;
        margin: 10px;
        padding: 10px;
        width: 200px;   
    }
    .video img {
        float: left;
        margin-right: 15px; 
    }
    .video a:hover {
        color: #hexcol; 
    }
    .video:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden; 
    }

Obviamente, existem alguns estilos aqui que você não precisa, mas eu usei-los para teste em um navegador. Se você quer que seu texto para alinhar verticalmente com a sua miniatura de vídeo, você precisará definir a propriedade line-height para a mesma altura que a imagem em miniatura. Que vai empurrar o texto para o meio do vídeo.