0

我碰壁了，我快到最后期限了。所以这里。

我有一个 3x3 网格，在 8 个外部 div 中的每一个中都有一个背景图像，当悬停在上面时，使用 CSS 会发生变化。

中央 div 有使用一点 jQuery 的文本，显示每个对应的 div 被单击的时间。

我需要发生的是，当单击带有图像的外部 div 并显示文本时，该 div 中的背景图像保持悬停状态，直到单击另一个，理想情况下使用现有图像。

悬停的 CSS 是 -

.br a {
display:block;
width:250px;
margin:0;
height:225px;
float:left;
background:url('wp-content/themes/bondwoodhouse/img/br.png');
background-position:0px 0px;}
.br a:hover {
background:url('wp-content/themes/bondwoodhouse/img/br.png');
background-position:250px 250px; }

jQuery是-

$(document).ready(function(){
$('a').click(function () {
var divname= this.name;
$("#"+divname).show("fadeIn").siblings().hide("fadeIn");
});
});

所有的div都这样排列——

<div class="br"><a href="#" onclick="return false;" name="div9"></a></div>

如前所述，有 8 个单独的类，br 是右下角的类。

这可能相当容易，但我对 jQuery 很迷茫。我假设我可以将一些东西粘贴到现有的 jQuery 中，只是换掉图像？切换什么的？

整页是最后一刻才拼凑起来的，但这是最后的绊脚石。非常感谢任何帮助。

4

2 回答 2

0

jQuery中的.hide()和.show()方法不支持'fadeIn'或'fadeOut'，使用'fast'、'slow'或任何数字作为毫秒（ms）整数，即400，像这样：

$("#"+divname).show("slow").siblings().hide("slow");

如果你坚持使用fadeIn或fadeOut动画，你应该使用.animate()方法来代替，像这样：

$("#"+divname).show().animate({height:"toggle",opacity: "toggle"},duration:"slow"}).siblings().hide().animate({height:"toggle",opacity:"toggle"},{duration:"slow"});

有关更多详细信息，请参见此处。

于 2012-05-16T13:20:01.547 回答
0

您可以在 CSS 中添加一些 .selected 规则，其行为类似于悬停规则：

/* Highlight if hover and also if the .br is selected */
.br a:hover,
.br.selected a {
  background:url('wp-content/themes/bondwoodhouse/img/br.png');
  background-position:250px 250px;
}

并将其设置在 div 上：

var selectedTile = $();
$(".container > div > a").click(function() {
    // remove the selected class from the previously
    // selected element (does nothing for the first time)
    selectedTile.removeClass("selected");
    selectedTile = $(this).parent();
    selectedTile.addClass("selected");
});

假设一个容器元素：

<div class="container">
<div class="br"><a href="javascript:;"></a></div>
<div class="tl"><a href="javascript:;"></a></div>
</div>​

您的脚本可能如下所示：

$(document).ready(function(){
    var selectedTile = $();
    $('a').click(function () {
        var divname= this.name;
        $("#"+divname).show("fadeIn").siblings().hide("fadeIn");

        // remove the selected class from the previously
        // selected element (does nothing for the first time)
        selectedTile.removeClass("selected");
        selectedTile = $(this).parent();
        selectedTile.addClass("selected");
    });
});

如果您按照上述说明修改 CSS，这将起作用。

这是小提琴

于 2012-05-16T13:29:40.100 回答