0

what i'm looking for is a way that when an image is hovered the text, that is over it, changes. I've searched the site for while all the solutions don't seem to work for me.

Here's my code.

        <div class="four columns full-height">
        <div class="projects"><a href="#">Collectif Neuf</a></div> 
        <a href="#"><img class="vertical" src="images/projects/c9.jpg"></a>
        </div>

i've also tried this : CSS image hover change color of text

it only works if the img is over my .projects div. But my .projects div needs to be over the img for it to display properly.

Thanx for your help.

EDIT

I've just realize that i didn't explain well what i am looking for. By text change i meant that when the image is being hover the link will be underline. Now the link only gets underline if it's being hover.

Really sorry for that.

Community
  • 1
  • 1
user1563899
  • 3
  • 3

1 Answers1

0

Without jquery:

<script>
function domover(el) {
    el.parentNode.parentNode.firstChild.firstChild.style. = 'Hi!';
el.parentNode.parentNode.firstChild.firstChild.style.textDecoration  = 'underline';
}

function domout(el) {
    el.parentNode.parentNode.firstChild.firstChild.innerHTML = 'Bye';
el.parentNode.parentNode.firstChild.firstChild.style.textDecoration  = 'none';
}
</script>


 <div class="four columns full-height"><div class="projects"><a href="#" style="text-decoration:none">Hi</a></div> 
    <a href="#"><img class="vertical" src="http://i.imgur.com/l5WLB.jpg" onmouseover="domover(this)" onmouseout="domout(this)"></a>
 </div>

Test: http://pastehtml.com/view/c6kbpxrzp.html

Notice that, for this to work, there must be no spaces (nor newlines) between the first elements.

leonbloy
  • 73,180
  • 20
  • 142
  • 190
  • Thanks alot for your help. Sadly i did not explain well what i was looking for. What i meant is that when the image is being hover the text get underline. – user1563899 Jul 30 '12 at 19:52
  • is possible to do this without changing the text. So that it as the original text. Also could the underline be more complex like so: `color: #000; background: url(../images/underlineh1.gif) repeat-x 100% 100%; padding-bottom: 5px; outline: 0;` – user1563899 Jul 30 '12 at 20:19
  • Of course, just comment the line that changes the text, and add the relevant styles. All CSS styles have their Javascript names, http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html , but I guess you must read a little about javascript – leonbloy Jul 30 '12 at 20:36