2

私が取り組んでいる Web ページでは、ユーザーがリンクの上にマウスを置いたときに画像を表示する基本的な CSS 効果を使用しています。

HTML は次のようになります。

<div id="container">
    <ul> 
        <li>
            <a href="" id="first-link"><div id="first-image"></div>First link text</a>
            <a href="" id="second-link"><div id="second-image"></div>Second link text</a>
            <a href="" id="third-link"><div id="third image"></div>Third link text</a>
        </li>
    </ul>
</div> <!-- #container -->

それぞれdivの内部にaは、CSS で適用された背景画像があります。リンクをホバーしたときに画像を表示する CSS は次のとおりです。

#first-link:hover #first-image,
#second-link:hover #second-image,
#third-link:hover #third-image {
    display:block;
}

ここで、jQuery を追加したいと思います。スクリプトでランダムに選択しa、divそこに含まれる (マウス ホバーを「強制」するかのように) ようにします。

これを可能にするために、.jquery-select クラスを HTML に追加しています。これにより、必要な を選択できるようaになります。

<div id="container">
    <ul> 
        <li>
            <a href="" id="first-link" class="jquery-select"><div id="first-image"></div>First link text</a>
            <a href="" id="second-link" class="jquery-select"><div id="second-image"></div>Second link text</a>
            <a href="" id="third-link" class="jquery-select"><div id="third image"></div>Third link text</a>
        </li>
    </ul>
</div> <!-- #container -->

また、.hovered クラスを CSS に追加しています。

#first-link:hover #first-image,
#second-link:hover #second-image,
#third-link:hover #third-image,

#first-link.hovered #first-image,
#second-link.hovered #second-image,
#third-link.hovered #third-image {
    display:block;
}

次に、JavaScript で乱数を選択します。

var random = Math.floor(Math.random()*3);

aそして、次を含むランダムに選択されたクラスに.hoveredクラスを追加したいdiv：

$("a.jquery-select").eq(random).children("div").addClass("hovered");

そして、これは私の努力が惨めに失敗する場所です。なぜなら、どういうわけか何も選択されず、ランダムな画像が表示されないからです。私の選択が間違っているか、.hovered クラスを CSS や jQuery で間違った要素に割り当てているか、または上記のすべてが原因で、それを機能させる方法がわかりません。

ですから、これらのことをもう少しよく知っている人からのアドバイスが必要です。どうすれば機能しますか？

4

3 に答える 3

0

使用する$("a.jquery-select").eq(random).children("div").show();

#firstlink:hover #first, #secondlink:hover #second, #thirdlink:hover #third {
    display:block !important;
    width:100px;
    height: 100px;
}

function temp(){
    $("a.jquery-select").eq($(window).data("rand")).children("div").hide();

}
var random = Math.floor(Math.random()*3);
$(window).data("rand",random);
$("a.jquery-select").eq(random).children("div").show();
$("a.jquery-select").mouseenter(temp);

デモ JSFIDDLE

デモJSBIN

以下のコメントによると、これに似たコードが必要になります...

HTML

<div id="image" style="width:100px;height: 100px"></div>
<div id="container">
    <ul> 
        <li>
            <a href="#" id="first-link" class="jquery-select">First link text</a>
            <a href="#" id="second-link" class="jquery-select">Second link text</a>
            <a href="#" id="third-link" class="jquery-select">Third link text</a>
        </li>
    </ul>
</div>

JQuery Javascript

$(document).ready(function(){
var images=["http://www.w3schools.com/cssref/paper.gif","http://www.w3schools.com/cssref/img_flwr.gif","http://www.w3schools.com/cssref/img_tree.gif"];

      var random = Math.floor(Math.random()*3);

   $("a.jquery-select").mouseenter(function () {
    var div=$("#image");
    $("a.jquery-select").css("border","none");
    $(this).css("border", "1px solid #ff0000");
    div.css("background","url("+images[$(this).index()]+")");
    div.show();
  }).mouseleave( function () {
         $(this).css("border", "none")
    });
  $("#image").css("background-image","url("+images[random]+")");
   $("a.jquery-select").eq(random).css("border", "1px solid #ff0000");
});

新しいデモ JSBIN

新しいデモ JSFIDDLE

リンクを特定の間隔でランダムに選択するには

setInterval(function(){
  var random = Math.floor(Math.random()*3);
      $("#image").css("background-image","url("+images[random]+")");
      $("a.jquery-select").css("border","none");
      $("a.jquery-select").eq(random).css("border", "1px solid #ff0000");
},1000);

上記のコードの最後の 2 行の代わりに...

于 2013-05-22T16:10:38.160 に答える