Wie kann ich eine img und text verknüpfen link zu der gleichen Stelle und beide aktiv bei hover unabhängig von denen, die ich bin überfahren?

Könnte man das auch mit CSS machen, oder mit Javascript. Ohne zu wissen, das markup, und wie die Elemente angeordnet sind, ist es nicht möglich zu bestimmen, welche option am besten ist.

CSS-Option

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

In diesem Beispiel haben wir unserem text und Bild sowohl innerhalb eines link. Wir ändern dann die Farbe des Textes auf dem :hover-Ereignis.

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"); }
);

Dieses Beispiel präsentiert eine Lösung, fügt einfach eine Klasse zu der übergeordneten container, die wiederum ändert die Darstellung der Titel. Dieses Ereignis wird gesteuert, indem man die Maus über das Bild in den container.

Update:

Positionierung dein text ist gar nicht so schwer. Die schnelle und einfache Methode wäre, um die position des übergeordneten Containers mit verwandten, und der text mit absoluten:

<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; }

Dass Sie ein kurzes Beispiel. Sie können ändern Sie die Werte an Ihre Bedürfnisse an.

InformationsquelleAutor Sampson

Basierend auf Jonathan ' s Antwort, aber für javascript, wenn Sie nicht verwenden 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>

InformationsquelleAutor awe