Wie kann ich einen img und Text-Link sowohl Link an den gleichen Ort zu machen und sowohl auf schweben unabhängig von denen eine aktiv i über mich schweben?

Question

würde Ich mag Lage sein, schwebt über dem Bild zu haben, die Hover-Eigenschaft auf den Textlink aufrufen zu, dass neben ihm ist.

Ich habe eine Bildvorschau von einem Video und das Video Namen neben ihn als Textzeichenfolge geschrieben. Ich mag es so machen, ich auf dem Bild schweben kann und den Text noch die Farbe ändern wie ein Hover-Effekt machen, ohne das Bild und Text alle ein Bild machen zu müssen, aus offensichtlicher Suche und Usability Gründen; halter Text als Text usw.

UPDATE: Ich mag auch sicher, den Text Link machen, die jetzt in der „Spanne“ ist, kann nicht nur bewegen, über „margin-left“ verwendet, kann aber bis angehoben werden. Standardmäßig im Code ich habe es fällt nur auf das Niveau des Bodens des 60x60px Bildes. Ich will es höher hinauf, so sieht es schön, aber „margin-bottom“ nicht dabei helfen. ich will es in der „Spitzenhöhe“ des 60x60 img ... nicht am Ende davon, wo sie standardmäßig geht.

Irgendwelche Ideen? Vielen Dank!

P. S. Ich bin offen für die Java-Skript und jquery Ideen einig hier geschrieben, aber ich bin ein absoluter Neuling auf, dass und wird zusätzliche Erklärung bedarf. Ich ziehe CSS.

mein Code ist jetzt:

meine html ist:

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

meine CSS ist:

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

Sie können dies tun mit CSS oder Javascript. Ohne Ihren Markup zu wissen, und wie Sie Ihre Elemente angelegt 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 unseren Text und Bild sowohl innerhalb eines Link. Wir modifizieren dann die Farbe des Textes auf der Seite:. 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 zeigt eine Lösung, die einfach eine Klasse zu den übergeordneten Container hinzufügt, was wiederum die Darstellung des Titels ändert. Dieses Ereignis wird gesteuert, indem das Bild innerhalb des Behälters schwebt.

Update:

Ihr Text Positionierung ist nicht so schwierig. Die schnelle und einfache Methode wäre, die übergeordneten Container mit relativ zu positionieren, und dem Text mit absolutem:

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

Das ist ein kurzes Beispiel. Sie können die Werte auf Ihre Bedürfnisse ändern.

Answer 2

Was ist

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

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

Answer 3

Auf der Grundlage von Jonathan Antwort, aber für Javascript, wenn Sie jQuery nicht verwenden:

<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

Ich entschuldige mich. Ich Fehl lesen Sie Ihre Frage. Hier ist ein weiterer Stich an sie:

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

Natürlich gibt es einige Arten in hier, dass Sie nicht brauchen, aber ich habe sie in einem Browser zu testen. Wenn Sie Ihren Text mit Ihrem Video-Thumbnail vertikal ausrichten möchten, müssen Sie die Eigenschaft line-height auf die gleiche Höhe wie das Thumbnail-Bild setzen. Das wird den Text in der Mitte des Videos drücken.