Question

我正在寻找的是一种方式，当图像悬停时，文本就会在其上方发生变化。我搜索了网站，而所有的解决方案似乎都不适合我。

这是我的代码。

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

我也试过这个：CSS image hover change color of text

只有当img超过我的.projects div时它才有效。但我的.projects div需要超过img才能正常显示。

Thanx求助。

修改

我刚刚意识到我没有很好地解释我在寻找什么。通过文本更改，我的意思是当图像悬停时，链接将是下划线。现在链接只有在悬停时才会显示下划线。

真的很抱歉。

Answer 1

没有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>

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

请注意，要使其工作，第一个元素之间必须没有空格（也不能换行）。

悬停图像和文本更改

1 个答案: