0

私が探しているのは、画像をホバーすると、その上にあるテキストが変化する方法です。サイトを検索しましたが、すべての解決策がうまくいかないようです。

これが私のコードです。

        <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画像のホバーはテキストの色を変更します

imgが私の.projects divの上にある場合にのみ機能します。しかし、正しく表示するには、私の .projects div が img の上にある必要があります。

助けてくれてありがとう。

編集

私が探しているものをうまく説明していないことに気づきました。テキストの変更とは、画像がホバーされているときにリンクに下線が引かれることを意味しました。リンクがホバーされている場合にのみ、リンクに下線が引かれるようになりました。

本当にごめんなさい。

4

1 に答える 1

0

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

これが機能するには、最初の要素の間にスペース (または改行) があってはならないことに注意してください。

于 2012-07-30T19:37:19.747 に答える