css - 悬停图像和文本更改

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 才能正确显示。

感谢您的帮助。

编辑

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

对此真的很抱歉。

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

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