jQuery 设置活动/悬停背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3279873/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery set active/hover background images
提问by Brett
I have a list that has 5 items in, the first one (on load) is active (with a class of 'active' added by jQuery). They all have background images associated with them. If I click any of the li's another div updates with relevant content (this is working).
我有一个包含 5 个项目的列表，第一个（加载时）是活动的（jQuery 添加了一个“活动”类）。它们都有与之相关的背景图像。如果我单击 li 的任何一个带有相关内容的另一个 div 更新（这是有效的）。
However I'm struggling with the following:
但是，我正在努力解决以下问题：
If you click an li, update its background image to be colour (suffix of '-cl.png'). When I hover over another one, update its background image to be colour and keep the clicked one (with a class of 'active') colour too. If an li is not hovered over set the background image to be black and white (suffix of '-bw.png') but keep the active one colour.
如果单击 li，将其背景图像更新为彩色（'-cl.png' 的后缀）。当我将鼠标悬停在另一个图像上时，将其背景图像更新为彩色并保持点击的图像（带有一类“活动”）颜色。如果 li 没有悬停，将背景图像设置为黑白（'-bw.png' 后缀），但保持活动的一种颜色。
Hope I've explained myself clearly. Any ideas on how I can achieve this? Thanks, Brett
希望我已经解释清楚了。关于如何实现这一目标的任何想法？谢谢，布雷特
Here's my HTML:
这是我的 HTML：
<ul class="graduate_tab">
<li class="graduate1"><a href="#grad1"><span class="gradimg1">grad1</span></a></li>
<li class="graduate2"><a href="#grad2"><span class="gradimg2">grad2</span></a></li>
<li class="graduate3"><a href="#grad3"><span class="gradimg3">grad3</span></a></li>
<li class="graduate4"><a href="#grad4"><span class="gradimg4">grad4</span></a></li>
<li class="graduate5"><a href="#grad5"><span class="gradimg5">grad5</span></a></li></ul>
回答by 3rgo
$('.graduate_tab li').hover(
function() {
$(this).css('background-image','your-image-cl.jpg');
}, function() {
$(this).css('background-image','your-image.jpg');
});
$('.graduate_tab li').click( function() {
$('.graduate_tab li').removeClass('active');
$(this).addClass('active');
});
This should do the trick. In case I forgot something, tell me, and I'll edit the code.
这应该可以解决问题。如果我忘记了什么，告诉我，我会编辑代码。
回答by Nick Craver
First, I would do mostof the work in CSS, like this:
首先，我会在 CSS 中完成大部分工作，如下所示：
.graduate1 { background: url(image1-bw.png); }
.graduate1.active, .graduate1:hover { background: url(image1-cl.png); }
.graduate2 { background: url(image2-bw.png); }
.graduate2.active, .graduate2:hover { background: url(image2-cl.png); }
//etc...
Then in jQuery all you need to worry about is the activeclass, like this:
然后在 jQuery 中，您只需要担心active类，如下所示：
$('.graduate_tab li').click( function() {
$(this).addClass('active').siblings().removeClass('active');
});
Using .addClass()on the clicked one and .removeClass()on the rest will move the activeclass to the clicked one...if you want to be able to remove it from an already active one (toggle it off) you can replace .addClass()with .toggleClass()for that behavior.
使用.addClass()上的点击一个和.removeClass()上其余的将在移动active类的被点击一个...如果你希望能够从已经激活的一个取出（切换它关闭），你可以替换.addClass()使用.toggleClass()了这种行为。
回答by RICHARD HARTMAN
I used the click hover jquery function. No need to give each lia class in css. Hence:
我使用了单击悬停 jquery 功能。无需li在 css 中为每个类指定一个类。因此：
.ui-state-active, .ui-state-hover {
font-weight: bold !important;
//and other css
}
and
和
jQuery('.graduate_tab li').bind('click hover', function () {
jQuery(this).addClass('.ui-state-active')
.siblings().removeClass('.ui-state-active');
});
Hope this helps someone.
希望这可以帮助某人。
回答by Sumith Harshan
$('.titleclz').mouseenter(function( event ) {
$(this).css('background-image','url(bg-image1.png path)');
$(this).css('background-repeat','no-repeat');
});
$(".titleclz").mouseleave(function( event ) {
$(this).css('background-image','url(bg-image2.png path)');
$(this).css('background-repeat','no-repeat');
});
JQuery get image background hover effect...
jQuery获取图片背景悬停效果...
回答by guy schaller
you can use the :hover
你可以使用 :hover
property in css
css中的属性
active:hover {background-color:black;}
活动：悬停{背景颜色：黑色；}
somthing like this...
像这样的东西...
but i am not sure it will work in ie6.
但我不确定它是否适用于 ie6。
