1

CSSのみを使用して画像Bにカーソルを合わせたときに画像Aを更新する方法を知りたいのですが、可能ですか? そうでない場合、純粋な JavaScript (ライブラリなし) のみを使用してそれを行うにはどうすればよいでしょうか。しかし、CSSは本当に私が使いたいものです....

4

4 に答える 4

6

コメントで指摘したように、これは完全にマークアップに依存します。使用するマークアップが見当たらないので、いくつかの一般的な提案しか投稿できません。ただし、影響を与えたい要素 ( F) は、操作したい要素よりも DOM 内で後で出現する (要素の子であるFか、後続の兄弟であるか、後続の兄弟の子孫である) 必要があることに注意することが重要Eです。

とはいえ、関連するマークアップを使用すると、次のアプローチが機能します。

兄弟ベースの選択:

の最初のimg内部にカーソルを合わせると、 (一般的な兄弟) コンビネータを使用して、後続の要素の#aトグルが切り替えられます。displayimgE ~ F

<div id="a">
    <img src="http://www.lorempixel.com/200/400/nature" />
    <img class="first" src="http://www.lorempixel.com/200/400/people" />
    <img class="second" src="http://www.lorempixel.com/200/400/sports" />    
</div>​​​​​

#a img.second,
#a img.first:hover ~ img.second {
    display: none;
}

#a img:hover ~ img.first {
    display: none;
}

#a img:hover ~ img.second {
    display: inline-block;
}​

JS フィドルのデモ。

変更にカーソルを合わせると、 (直接兄弟) コンビネータを使用して、と内の画像#aの表示が切り替わります。.first.second#bE + F

<div id="a">
    <img src="http://www.lorempixel.com​​​​​​​​​​​​​​​​​​​​​​​​/200/400/nature" />
</div>
<div id="b">
    <img class="first" src="http://www.lorempixel.com/200/400/people" />
    <img class="second" src="http://www.lorempixel.com/200/400/sports" />    
</div>​​​​​​​​​​​​​​​​​

#a,#b {
    float: left;
    border: 1px solid #000;
    padding: 0.2em;
}

img.second {
    display: none;
}

#a:hover + #b img.first {
    display: none;
}
#a:hover + #b img.second {
    display: inline-block;
}​

JS フィドルのデモ。

子孫ベースの選択:

一般的な子孫コンビネータを使用します (スペース文字がE Fコンビネータであるかどうかは実際には完全にはわかりませんが、関係なく...の子孫であることに基づいています):FE

<div id="a">
    <img class="first" src="http://www.lorempixel.com/200/400/people" />
    <img class="second" src="http://www.lorempixel.com/200/400/sports" />    
</div>​

#a img.second {
    display: none;
}

#a:hover img.first {
    display: none;
}

#a:hover img.second {
    display: inline-block;
}

JS フィドルのデモ。

E > F直接の子/直接の子孫コンビネータの使用:

<div id="a">
    <img class="first" src="http://www.lorempixel.com/200/400/people" />
    <div>
        <img class="second" src="http://www.lorempixel.com/200/400/sports" />
    </div>
</div>​    div {
    display: inline-block;
}

img {
    display: none;
    border: 1px solid #000;
    padding: 0.2em;
}

#a > img {
    display: inline-block;
}

#a:hover img {
    display: inline-block;
}​

JS フィドルのデモ。

疑似要素と CSS 生成コンテンツを使用する機会もあります (準拠/最新のブラウザーで):

<div id="a"></div>​

#a {
    width: 200px;
    height: 400px;
    background-image: url(http://www.lorempixel.com/200/400/people);
    background-repeat: none;
    background-position: 50% 50%;
    position: relative;
}

​#a:hover::after {
    content: url(http://www.lorempixel.com/200/400/animals);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 100%;
}​

JS フィドルのデモ。

于 2012-06-11T17:37:12.490 に答える
3

#bgあなたの特定のケースでは、の子であるため、簡単です#hv

ホバー セレクターを現在のものから次のように変更するだけです。

#bg:hover #hv {...}

ここであなたのフィドルの私のフォークを見てください：http://jsfiddle.net/xJSQt/

于 2012-06-11T15:59:21.277 に答える
2

#hv外側の要素にカーソルを合わせたときに内側の要素の背景位置を更新するには#bg、次のことができます。

この実用的なフィドルの例を参照してください!

#bg:hover #hv {
   ...
}
于 2012-06-11T15:59:36.427 に答える
0

単純。次のような div があるとします。

<div class="myImage">

したがって、CSS で通常の背景画像を設定してから、:hover 疑似要素を使用して目的のロールオーバー画像に変更します。何かのようなもの：

.myImage{ background-image: url(imageA.jpg);} /*Set the normal image*/
.myImage:hover{ background-image: url(imageB.jpg);} /*Set the rollover image*/
于 2012-06-11T15:50:26.083 に答える