Question

我撞墙了，我正在接近截止日期。所以这里。

我有一个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中粘贴一些东西，只是交换图像？切换或什么？

整个页面都是最后一分钟并且被抛在一起，但这是最后一个绊脚石。任何帮助非常感谢。

Answer 1

jQuery中的.hide()和.show()方法不支持'fadeIn'或'fadeOut'，使用'fast'，'slow'或任何数字作为miliseconds（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"});

有关详细信息，请参阅here。

Answer 2

您可以在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，这将有效。

Here's the Fiddle

将鼠标单击时的图像交换应用于现有的CSS鼠标悬停

2 个答案: