Databases
StackOverflow2013
Postsdbo
POHow can I make an img and text link both link to the same place and both become active on hover independent of which one i am hovering over?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I make an img and text link both link to the same place and both become active on hover independent of which one i am hovering over?
    text
    copied!<p>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. </p> <p>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. </p> <p>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 60x60 img... not at the bottom of it where it goes by default. </p> <p>ANy ideas? thanks! </p> <p>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. </p> <p>my code now is:</p> <p>my html is: </p> <pre><code>&lt;div id="example"&gt; &lt;a href="#"&gt; &lt;img src="image/source_60x60px.jpg"&gt; &lt;span class="video_text"&gt;Image Text&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; </code></pre> <p>my css is:</p> <pre><code>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;} </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload