1

ライトボックスを作っています。画像にカーソルを合わせると、付随するテキストと関連画像も点灯するはずです。ただし、付随するテキストはそうではありません。

それらはすべて同じクラス内にありますが、テキストはページのさらに下の ap タグ内にあります。

ウェブサイトはこちら: www.rosiehardwick.co.uk

.nationaltrust {
background-color:red;
-webkit-transition: opacity 0.5s linear; 
opacity: 0.05;
}


.nationaltrust:hover {
-webkit-transition: opacity 0.5s linear; 
opacity: 1;
}

そしてhtml：

 </div>
<div id="image-wrap">
<div class="nationaltrust">
<img src="/images/ss.gif"/>
<img src="/images/aw.gif"/>
</div>

</div>

<div id="para-wrap">
<div class="nationaltrust"><p>
blahblah</p></div></div>

助けてくれてありがとう、私はこれにかなり慣れていない、

トム

4

2 に答える 2

1

クラス/ホバーがどのように機能するかを誤解しているかもしれません。あなたが書くとき：

.someClass:hover {color: red}

「クラス'someClass'の要素にカーソルを合わせると、その色を赤にします」とブラウザに指示します。「クラス'someClass'のすべての要素を赤にする」という意味ではありません。

私があなたを正しく理解しているなら、あなたはある要素にカーソルを合わせて別の要素のスタイルを変更したいと思うでしょう。これを行うには2つの方法があります-1）画像とテキストの両方を単一の包含要素内に配置してから：hoverスタイルを適用するか、2）JavaScriptを使用して2つの間の接続を確立し、必要に応じてスタイルを調整します。

＃1の場合：

HTML： 

<div class="nationalTrust">
    <img src="/images/ss.gif"/>
    <p class="caption">Blah blah</p>
</div>

CSS：

.nationalTrust:hover img {
    opacity: 1;
    background-color: red;
}

/* Just to show that you can have different styles for the text and image*/
.nationalTrust:hover .caption {
    opacity: 0.85; 
}

あなたがやりたいことのために、それはうまくいかないかもしれません：1つの要素の中に画像とテキストの両方を含めるには制限が強すぎるかもしれません。その場合は、JavaScriptを使用することをお勧めします。この例では、jQueryを使用して物事を単純化します。

HTML：

<img class="nationaltrust" src="/images/ss.gif"/>

<p class="nationaltrust-caption">Blah-blah</p>

Javascript：

$(function(){
    $('img.nationaltrust').hover(
        function(){
            $('p.nationaltrust-caption').addClass('active'); //When the image is hovered, add the 'active' class to the caption
        },
        function(){
            $('p.nationaltrust-caption').removeClass('active'); //Remove the class when un-hovered.
        }
    )
});

さて、そのjavascriptは非常に速くて汚いですが、それはあなたが望むことをするはずです。問題は、ページにある画像/キャプションごとに個別のコードを記述する必要があることです（それらはすべて異なるクラスを持っていると想定しています）。HTMLとJSを記述して、さまざまな画像で機能するようにするのは簡単です。その例もご覧になりたい場合はお知らせください。

于 2012-07-03T13:45:43.857 に答える
1

付随するテキストが点灯していないのは、それが別の要素にあるためです。

ルールは、マウス ポインターがホバリングして.nationaltrust:hoverいる実際の要素にのみ影響し.nationaltrust、テキストは別の要素内にあるため、ライトアップされません。ただし、マウス ポインターをテキスト要素の上に置くと、その要素は点灯しますが、画像は点灯しません。

これを解決する 1 つの方法は、画像と付随するテキストの両方を同じ div 要素にラップし、ホバー ルールをその要素に向けることです。

それを解決する別の方法は、両方の div を点灯させる JavaScript を少し追加することです。

于 2012-07-03T13:33:37.493 に答える