悬停图像和文字更改 [英] hover image and text change

问题描述

我正在寻找的是一种当图像悬停时，文本即将改变的方式。我在网站上搜索了所有解决方案似乎都不适合我。

这是我的代码。

 < div class =四列全高> 
< div class =projects>< a href =＃> Collectif Neuf< / a>< / div> 
< a href =＃>< img class =verticalsrc =images / projects / c9.jpg>< / a> 
< / div> 
  

我也试过这个： CSS图像悬停改变文本的颜色

它只适用于img超过了我的.projects div。但我的.projects div需要超过img才能正常显示。

Thanx为您提供帮助。

编辑

我刚刚意识到我没有很好地解释我在找什么。通过文本更改，我的意思是当图像悬停时，链接将被强调。

真的很抱歉。

解决方案<没有jquery：

 < script> 
函数domover（el）{
 el.parentNode.parentNode.firstChild.firstChild.style。 ='嗨！'; 
 el.parentNode.parentNode.firstChild.firstChild.style.textDecoration ='underline'; 
} 
 
函数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 ：无>您好< / A>< / DIV> 
< a href =＃>< img class =verticalsrc =http://i.imgur.com/l5WLB.jpgonmouseover =domover（this）onm​​ouseout = domout（这）>< / A> 
< / div> 
  

测试： http://pastehtml.com/view/c6kbpxrzp.html

请注意，为了达到这个目的，第一个元素之间的空格（也不是换行符）。

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.

解决方案

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.

这篇关于悬停图像和文字更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！