0

div 内にテキスト行 (リンク) があります。リンクの上にマウスを置くと、divの色が変わります。私は成功せずにさまざまなことを試みました。ここで私の現在のコードを見ることができます: http://jsfiddle.net/Grek/D3TzM/私は必ずしも jquery ソリューションを探しているわけではないことに注意してください。助けてくれてありがとう

CSS

.source-title-box a{
    color:#467FD9;
    display:inline-block;   
}
.source-title-box a:hover{
    color:#666666;
}
.source-title-box hover{background:#cb2326;}

JS:

$('a').hover(function(){
    $(this).parent().toggleClass('hover');
});​
4

5 に答える 5

4

のような疑似クラスの下で選択できます:hover。これにはJavaScriptはまったく必要ありません。

http://jsfiddle.net/7bFKq/ 

.source-title-box:hover{
    background-color:#467FD9;

}

.source-title-box:hover a{
    color:#FFFFFF;
}

</p>

にカーソルを合わせて実行する必要がある場合は、javascript が必要です。

http://jsfiddle.net/7wwdb/

$('a').hover(function(){
    // .closest will get you to the div regardless of what might
    // be in between. With .parent you get to the absolute parent, which
    // in your case is a span
    $(this).closest('.source-title-box').toggleClass('hover');
});​

css は基本的に同じです:hover。.hover

.source-title-box.hover{
    background-color:#467FD9;

}

.source-title-box.hover a{
    color:#FFFFFF;
}
于 2012-08-13T20:12:08.003 に答える
2

jsFiddle デモ

最も近い div を探してください。immididate .parent()は<span>タグでした (そのようにしない限り、要素を自動的にブロックすることはありません)。

$('.activity-title a').on('mouseover', function () {
    $(this).closest('div').toggleClass('hover');
});

$('.activity-title a').on('mouseout', function () {
    $(this).closest('div').toggleClass('hover');
});
于 2012-08-13T20:14:29.833 に答える
1

持っている JavaScript を保持し、次の CSS クラスを追加します。

.hover {
    background-color: #f00;
}

http://jsfiddle.net/RLjvB/

于 2012-08-13T20:11:47.313 に答える
1

これを変更します：

.source-title-box a
{
    color:#467FD9;
    display:block;
    text-decoration:none;    
}

に：

.source-title-box a
{
    color:#467FD9;
    display:block;
    text-decoration:none;  
    padding:15px;
}

この：

.source-title-box
{
    color: #000;
    background: #fff;
    padding: 15px;
    width: 200px;
    position: relative;
    margin-top:10px;
    border: 1px dotted #666;
}

に：

.source-title-box
{
    color:#000;
    background:#fff;
    width:230px;
    position:relative;
    margin-top:10px;
    border:1px dotted #666;
}

デモ

JS は必要ありません。

于 2012-08-13T20:18:03.977 に答える
1

グレッグ、ポイントは 2 つあります。

1) jquery .hover() 関数は、引数として 2 つのハンドラーを想定しています。1 つは handlerin (マウス オーバー) 用で、もう 1 つは handlerout (マウス アウト) 用です。引数を 1 つだけ指定すると、引数が In-Out ハンドラとして使用されます。つまり、両方のマウス イベントに対して同じハンドラが使用されます。

2) 作成したスクリプト (js) がページの下部に含まれていることを確認します。つまり、「body」タグを閉じる直前です。
これは、スクリプトの実行時に html 要素がロードされていない可能性があるためです。

...Your HTML Code...
<script>
    $('a').hover(function(){
    $(this).parent().toggleClass('hover');
    });​
</script>
</body>

お役に立てれば。

于 2012-08-13T20:43:09.513 に答える