我的 About 页面上有一个小型的“交互式幻灯片”,用户可以单击其中的5个按钮之一,然后查看相应的“幻灯片”。每个“幻灯片”都是带有不同内容的<section>
元素。页面加载时,第一个按钮(“关于我”)应该是红色的。以下是其他要求:
- 当用户单击任何按钮时,它应该变为红色并且所有其他按钮都应该变为蓝色。
- 该按钮必须在用户“离开”按钮时保持红色
- 当用户将鼠标悬停在任何按钮上时,它应该变为红色,然后在用户离开时变回蓝色
- 除非这个按钮是当前按钮,在这种情况下它必须保持红色
- 必须始终存在1个红色按钮,因为这表示上一个幻灯片。
- 只能同时有2个按钮是红色的(一个来自先前的单击,另一个来自当前的悬停)。
我已经完美地实现了.click()
事件,但似乎无法同时使用.hover()
效果。当我同时运行两个效果时,hover
效果会覆盖click
效果。鼠标在单击按钮后离开该按钮后,背景色就会更改为dodgerblue
,即使应该保持为indianred
(我认为这是由于悬停事件中的“mouseoff”部分)。
我已经查看了类似的问题,但找不到一个回答我的问题的答案。
有什么建议吗?
var aryButtons = $('.button');
$(aryButtons[0]).css('background-color', 'indianred');
// IMPORTANT - If you comment this section out, the hover effect disappears, but the click function works. However, I need to have both working at once, so that when a button is clicked, it will stay indian red even when the user leaves the element. In addition, they need to be able to hover over other elements again.
$(aryButtons).hover(function () {
$(this).css('background-color', 'indianred');
}, function () {
$(this).css('background-color', 'dodgerblue');
});
$(aryButtons).click(function () {
$.each(aryButtons, function () {
$(this).css('background-color', 'dodgerblue');
});
$(this).css('background-color', 'indianred');
});
<section class="button"></section>
<section class="button"></section>
<section class="button"></section>
.button {
display: inline-block;
height: 50px;
width: 50px;
margin-right: 10px;
background-color: dodgerblue;
border: 1px solid black;
}
这里有一个jsFiddle链接:https://jsfiddle.net/UnaviaMedia/b3ozk00p/8/
这个链接是一个展示IT技术相关内容的网站,可以让用户在上面运行和测试他们的代码。