悬停/单击DIV列表
hover/click with list of DIVs
我有一组DIV
,我需要给它们一个鼠标悬停的效果,当其中一个被点击DIV
时,点击的 DIV 应该看起来像是悬停(或任何效果),直到另一个 DIV 被点击。
<div class="items" id="item1">AN ITEM</div>
<div class="items" id="item2">AN ITEM</div>
<div class="items" id="item3">AN ITEM</div>
<div class="items" id="item4">AN ITEM</div>
我试图使用 jQuery 来实现这一点,但鼠标退出后效果消失了。
$('.items').hover(function () {
var div = $(this).attr('id');
if ($(div).css("background-color") == settings.color2) {
return false;
} else {
$("#" + div).css("background-color", settings.color2);
}
}, function () {
var div = $(this).attr('id');
if ($(div).css("background-color") == settings.color2) {
return false;
} else {
$("#" + div).css("background-color", "transparent");
}
}).click(function () {
$(this)
.closest('div')
.css("background-color", "transparent");
$(this).css("background-color", settings.color2);
});
与其使用 JS 添加悬停样式,我建议通过 CSS 添加它们。并将相同的样式添加到"活动"类中,并在单击时切换该类。
像这样:
.CSS:
.items:hover,
.items.active {
background-color: /* whatever */;
}
.JS:
$('.items').on('click', function() {
$('.items').removeClass('active');
$(this).addClass('active');
});
尝试在
单击时添加一个与悬停样式相同的"活动"类。当单击其他某个div 时,您可以从先前单击的div 中删除该类并将其添加到当前div。
尝试
var $items = $('.items').hover(function () {
$(this).css("background-color", 'red');
}, function () {
if (!$(this).hasClass('clicked')) {
$(this).css("background-color", "transparent");
}
}).click(function () {
$items.filter('.clicked').css("background-color", "transparent").removeClass('clicked')
$(this).addClass('clicked').css("background-color", 'red');
});
演示:小提琴
注意:我不敢使用类来设置单击状态的样式,因为它看起来像背景颜色来自一个选项,在这种情况下,很难分配类,否则单击的类也需要作为设置传递。
更好的选择是
var settings = {
color2: 'red',
clicked: 'clicked'
}
var $items = $('.items').hover(function () {
$(this).css("background-color", settings.color2);
}, function () {
if (!$(this).hasClass('clicked')) {
$(this).css("background-color", "transparent");
}
}).click(function () {
$items.filter('.' + settings.clicked).removeClass(settings.clicked)
$(this).addClass(settings.clicked);
});
演示:小提琴
相关文章:
- 从提示(jQuery)添加带有变量的列表项(Div)
- 使用无序列表展开DIV
- 范围和列表元素在 DIV 中换行
- 使用jQuery将列表中的元素集封装在DIV中
- 如何使用 jQuery 在键盘上为 Div 列表启用箭头导航
- 悬停/单击DIV列表
- 使用 Jquery 克隆下拉列表并附加到动态 Div
- 单击DIV时,如何切换UL列表
- 在动态html列表内容周围添加Div
- JavaScript链式下拉列表显示/隐藏一个Div
- 在Div标签中加载带有选择列表的图像
- 在数据列表中切换Div标签
- 显示“正在加载”Div元素,直到列表已加载,然后隐藏Div元素
- HTML / JS水平滚动DIV列表
- 如何制作新的Div内部列表项目
- 替换iframe与Div((多个)下拉列表相关)
- Javascript:用键盘导航DIV列表
- 如何使列表项显示/隐藏DIV列表或DIV的指定项
- 如何在Div中显示所有的列表标题?
- 可点击下拉列表不可见DIV