How can I make img and text link as a link to the same place, and both become active when it hangs, regardless of which one I’m soaring to?

Question

I would like to be able to hover over the image, referring to the hover property on the text link that is next to it.

I have a preview of the video image and the name of the video written next to it as a text string. I would like to do this so that I can hover over the image and make the text still change color as a hover effect, without having to make the image and text into one image for obvious searches and ease of use; saving text as text, etc.

UPDATE: I also want to make sure that the text link that is now in the "span" cannot just navigate using "margin-left", but can be raised. By default, in my code, it just drops to the level of the lower part of the image 60x60 pixels. I want it to be taller so that it looks good, but "margin-bottom" does not help. I want it at "Center Height" 60x60 img ... not at the bottom where it goes by default.

ANY ideas? thank you

ps I am open to java script and jquery ideas posted here, but I am a complete newbie and you will need further explanation. I prefer CSS.

Now my code is:

my html:

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

my 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

CSS Javascript. , , , .

CSS

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

. : hover.

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

, , , , . .

:

. , , :

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

. .

Answer 2

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

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

Answer 3

, javascript, 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

. . :

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

Obviously, there are several styles that you don’t need, but I used them for testing in the browser. If you want the text to be aligned vertically with your video thumbnail, you need to set the line-height property to the same height as the thumbnail. This will push the text to the middle of the video.