Question

我正在使用的网页使用基本的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);

我想将.hovered类添加到随机选择的a中，其中包含div：

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

这是我努力失败的地方，因为不知何故没有被选中，随机图像也不会显示。我的选择是错误的，或者我将.hovered类分配给CSS中的错误元素或使用jQuery，或者以上所有 - 我无法弄清楚如何使其工作。

所以，我需要一些了解这些事情的人的建议。我如何使其工作？

Answer 1

这是一个带有一些工作代码的fiddle。在.hovered类应用于随机div之前，您会注意到它，它首先从当前具有它的div中删除。否则所有的div都将以徘徊的阶级结束。

您将伪类:hover与类hovered混淆。你的css使用伪类，但你的jQuery正在添加一个实际的类。

Answer 2

您正在将“hovered”类添加到div而不是锚点。请改用以下内容。

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

Answer 3

使用$("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);

<强> DEMO JSFIDDLE

<强> DEMO 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");
});

<强> NEW DEMO JSBIN

<强> NEW DEMO 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);

而不是上面代码中的最后两行......

选择包含div的div以显示背景图像

3 个答案: