jquery动画下一个和prev元素
假设我有一个像这样的列表：
<div>
<span></span>
<hr/>
<span></span>
<hr/>
<span></span>
<hr/>
<span></span>
<hr/>
<span></span>
</div>
我需要一个代码如下：
所有hr元素都有背景颜色：＃color1。
在span元素中的鼠标悬停时，它的next和prev hr元素应该动画（背景颜色为＃color2），而在mouseout上这些元素应该再次动画到＃color1。
问题是，例如，如果我从第二个跨度移动到第三个跨度，第二个小时假定它不会改变颜色，因为它仍然是下一个/ prev元素之一。 我需要一个关于如何检测hr元素是否应该改变颜色的想法。
非常感谢
虽然我同意TJ（谁是总导师），我回答你的问题是。 你所要问的是与所涉及的因素无关：
请注意，根据本文，Chrome或Firefox上的<hr>颜色更改的工作方式不同：
改变hr元素的颜色
火狐：
$('li').hover(
function(){
$(this).prev('hr').css('background-color','green');
$(this).next('hr').css('background-color','green');
},
function(){
$(this).prev('hr').css('background-color','red');
$(this).next('hr').css('background-color','red');
}
);
http://jsfiddle.net/fxrkdgz6/1/
Chrome（使用边框颜色代替背景颜色）：
$('li').hover(
function(){
$(this).prev('hr').css('border-color','green');
$(this).next('hr').css('border-color','green');
},
function(){
$(this).prev('hr').css('border-color','red');
$(this).next('hr').css('border-color','red');
}
);
http://jsfiddle.net/fxrkdgz6
希望你的问题得到满意的回答，并且你看到Rodrigo的方法是为你的菜单提供更好的整体解决方案。
您正在寻找悬停效果。 你键入的html看起来像一个不好的代码下拉菜单，但不要担心，我明白你需要什么。 这里是你的代码示例
<ul>
<li>
Menu
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
</ul>
这是html，现在是CSS
ul {
width:200px;
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {width:200px;
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width:200px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
在这里我为你创建了一个演示
https://jsfiddle.net/r50kbnq7/
实际上，这可以很容易地完成，只需使用css转换即可。 使用jQuery将类添加到下一个和上一个hr元素，并让css完成剩下的工作！ 只需几行，你就完成了，看看这个小提琴
HTML
<div>
<span></span>
<hr/>
<span></span>
<hr/>
<span></span>
<hr/>
<span></span>
<hr/>
<span></span>
</div>
CSS
span { display: block; height: 1em; background: #000; }
hr { transition: all 2s; height: 0.5em; }
hr.animate { background: red; border-color: red; }
JQuery的
jQuery(document).ready(function($) {
$('span')
.on('mouseover', function(e) {
var $this = $(this);
var next = $this.nextUntil('span').eq(0);
var prev = $this.prevUntil('span').eq(0);
next.addClass('animate');
prev.addClass('animate');
})
.on('mouseout', function(e) {
var $this = $(this);
var next = $this.nextUntil('span').eq(0);
var prev = $this.prevUntil('span').eq(0);
next.removeClass('animate');
prev.removeClass('animate');
});
});