2

I'm using nearly pure css, (doing this in css only is not a requirement) background images and adjacent selectors for a page that presents unique human-readable textual information (via a div left side of page with the class name "default-text") when the user hovers over horizontally stacked images (on the right side of the page, where each image is uniquely classed with a sequentially suffixed classname, i.e., .hover1, .hover2, through .hover7).

If you load the page (in the jsfiddle link, below) and run the code, the page works. However, I'd like to enable a "sticky" hover state, one where when the user moves the cursor off the image the state for the image and the accompanying text remains in a hover state until either: mouse hovers another of the images OR a period of time lapses. Let's say 10 seconds.

For example; here's two rows of HTML for the images:

<div class="hover1"></div>
    <div class="hover1text hovertext">
        <h3>Best-in-Class BBQ</h3>
        <p>tons of text</p>
        <p>Lots more awesome text</p>
    </div>
<div class="hover2"></div>
     <div class="hover2text hovertext">
         <h3>Penetration and Vulnerability Tenderloin</h3>
          <p>More awesome text</p>
          <p>What you wanted</p>
      </div>
etc for the balance of the 7 items

A portion from my CSS:

.context-services .region-inner .field-name-body .float-right .hover1 {
    background-image: url(https://dl.dropboxusercontent.com/u/67315586/buttons/1_off.png);
    transition: 0s background;
}
.context-services .region-inner .field-name-body .float-right .hover1:hover {
    background-image: url(https://dl.dropboxusercontent.com/u/67315586/buttons/1_hover.png);
    transition: 0s background;
}
.context-services .region-inner .field-name-body .float-right .hover1 + .hover1text {
    opacity: 0;
    transition: 0s all;
}
.context-services .region-inner .field-name-body .float-right .hover1:hover + .hover1text {
    opacity: 1;
    transition: 0s all;
}

My jsfiddle.net for this is here.

Any insight appreciated; thanks!

4

2 に答える 2

1

ここに私の修正があります。遷移がなくて申し訳ありません

(function ($) {

$('.hover1,.hover2,.hover3,.hover4,.hover5,.hover6,.hover7').hover(
function () {
    $('.default-text').hide();
    $(this).addClass('hoverd').siblings().removeClass('hoverd');
},
function(){
    var self = $(this);
    setTimeout(function(){
        self.removeClass('hoverd');
        if (!self.siblings().hasClass('hoverd')){
            $('.default-text').show();
        }
    },1000);
});

}(jQuery));

この修正後の基本的な考え方は、css hover 'event' の代わりにクラス名を使用することです。css では、ターゲット要素の兄弟がホバーされているかどうかを判断できないため、javascript を作成してジョブを実行することをお勧めします。

まず、:hover セレクターを .hoverd に変更します。次に、jquery にクラス「ホバード」をターゲットに追加し、そのクラスを兄弟から削除するように指示します。hover の 2 番目の引数が mouseout のハンドラーである場合、jquery は 1 秒間待機し (テスト用に簡単なものを使用します)、クラス 'hoverd' を削除します。ユーザーが他のタブに移動しない場合、デフォルトのテキストが表示されます。

hovered...0.0 のスペルを間違えたようです。気にしないでください

于 2013-04-27T10:05:58.587 に答える
-2

あなたが代替テキストを意味するなら、それは本当に簡単です。彼の例を見てください: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_test

したがって、追加する必要があるコードは

alt="Smiley face"

楽しむ

于 2013-04-27T01:44:16.217 に答える