1

ページの 1 つの要素にホバー効果を適用しようとしていますが、ホバーした要素の子ではない画像に効果が発生します。

一部のhtml

<img id="background" src="image.jpg" />
<div id="container">
     <div id="bar"></div>
</div>

<style>
   #background{
       position:fixed;
       top:0;
       left:0;
       width:100%;
       height:100%;
    }
    #bar:hover + #background{
        /* apply some sexy css3 to the background image */
    }

    /* 
          tried #bar:hover ~#background
    */

</style>

したがって、カーソルを div#bar の上に置くと、画像にグレースケール効果が適用されますが、セレクターを機能させることができないようです:(これは私を悲しい子犬にします

どんな助けでも感謝し、事前に感謝します:)

4

3 に答える 3

0

ここに示すように、セレクターは機能します: http://jsfiddle.net/5DFLT/

#id1, #id2 {
    background: red;
    width: 100px;
    height: 100px;
    float: left;
}

#id2 {background: blue;}

#id1:hover + #id2 {background:green;}

しかし、あなたの HTML 構造は、これが機能するために必要なものに対応していません。

+意味: 別の要素の直後にある要素。 ~意味: 次の要素、最初の要素の直後、別の要素である必要はありません。

jQuery の代替案は次のようになります: http://jsfiddle.net/5DFLT/1/

$("#bar").hover(function () {
    $("#background").css("background-color", "green");
}, function () {
    $("#background").css("background-color", "black");
});
于 2013-11-14T21:00:38.870 に答える
0

残念ながら、そのように DOM を変更することはできません。jQueryルートに行く必要があります。以下の例:

$('#bar').hover(
    $('#background').css('fancy-css'); // do something
);

mouseenterまたは、との両方に対して個別の関数を実行する場合は、次mouseleaveのようにします...

$('#bar').hover(
    function() {
    // do this on mouse enter...
    },
    function() {
    // do this on mouse leave...
    }
);
于 2013-11-14T20:56:22.557 に答える
-1 
<div id="container">
     <div id="bar"></div>
     <img id="background" src="image.jpg" />
</div>

「#container」を position:absolute または position:relative にすることはできません。そうしないと、position:fixed; に影響します。位置。

于 2013-11-14T20:58:18.707 に答える