Question

I would like to be able to have hovering over the image invoke the hover property on the text link too that is next to it.

I have a image preview of a video and the video name written next to it as text string. I’d like to make it so i can hover on the picture and make the text still change color like a hover effect without having to make the image and text all one image , for obvious search and usability reasons; keeping text as text etc.

UPDATE: I also want to make sure the text link that is now in the “span” can not just move over using “margin-left” but can be raised up. By default in the code i have it just drops to the level of the bottom of the 60x60px image. I want it higher up so it looks nice but “margin-bottom” doesn’t help that. i want it in the “Center height” of the 60×60 img… not at the bottom of it where it goes by default.

ANy ideas? thanks!

p.s. I’m open to the java script and jquery ideas some posted here but i am a complete newbie at that and will need extra explanation. I prefer CSS.

my code now is:

my html is:

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

my css is:

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

You could do this with CSS, or with Javascript. Without knowing your markup, and how your elements are laid out, it’s not possible to determine which option is best.

CSS Option

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

In that example, we have our text and image both within a link. We are then modifying the color of the text on the :hover event.

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

This example showcases a solution that simply adds a class to the parent container, which in turn modifies the representation of the title. This event is controlled by hovering the image within the container.

Update:

Positioning your text isn’t that difficult. The quick-and-easy method would be to position the parent container with relative, and the text with absolute:

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

That’s a quick example. You can modify the values to your needs.