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

请注意，要使其正常工作，第一个元素之间不能有空格(也不能换行)。