Question

我需要创建的是淡入/淡出图像以显示其背后的图像，其上有文本，用户可以通过单击它保持在该按钮上。然后，当单击其他按钮时，它将返回其原始状态。但是，当点击图像时，其他按钮可以悬停在上面。

有8个图像/按钮。

Answer 1

将以下类添加到CSS样式表中：

非活动按钮状态的CSS类：

.buttonInactive { /* your inactive styles here */ }
一个CSS类，它使用:hover伪类，它将在没有JavaScript的情况下自动处理悬停：

.buttonInactive:hover { /* your hover styles here */ }
用于当前所选（即最近点击的按钮）的CSS类，将通过JavaScript设置：

.buttonActive { /* your active styles here */ }

在HTML中，每个按钮都应设置为class="buttonInactive"。如果你在此时测试它，你应该看到悬停工作。

然后，在JavaScript中，添加一个用于单击按钮的处理程序：

$(document).ready(function() {
   $(".buttonInactive").click(function() {
      // your code here
   });
});

您已使用jQuery标记了您的问题，这使得添加和删除样式变得非常简单。单击处理程序中的JavaScript需要从之前可能已处于活动状态的任何其他元素中删除buttonActive类（可以在一行jQuery中完成），然后将buttonActive类添加到单击的element（只需要多一行jQuery）。或者，您可能希望从当前活动元素中删除buttonInactive（显然，当它变为非活动状态时将其放回）。

你需要的jQuery是非常基本的，所以我会留给你做一些谷歌搜索并自己完成剩下的工作。

悬停的Fadein然后淡出到原始状态，但在点击时保持悬停状态

1 个答案: