2

我正在工作的网页使用基本的 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 中的错误元素，或者以上所有 - 我不知道如何使它工作。

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

4

3 回答 3

0

这是一些工作代码的小提琴。您会注意到，在将 .hovered 类应用于随机 div 之前，它首先从当前拥有它的任何 div 中删除。否则所有的 div 都会以悬停类结束。

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

于 2013-05-22T15:43:17.127 回答
0

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

$("a.jquery-select").eq(random).addClass("hovered");
于 2013-05-22T15:49:59.207 回答
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);

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

于 2013-05-22T16:10:38.160 回答