我有一个可以切换分隔线的 slider ,上面有两个箭头(上一个和下一个),现在我不关心箭头的外观或它们的位置。但我希望它们发挥作用,但是应用于 slider 的其他功能(例如悬停)也应用于箭头。我如何保留按钮功能(下一个/上一个),但使其与 slider 分开。
JSFIDDLE:http://jsfiddle.net/1ju1k0f6/
CSS:
#first
{
width: 50%;
height: 220px;
margin:auto;
padding-left: 170px;
margin-top: 2px;
}
#first img
{
height: 100px;
width: 100px;
float:left;
margin-right: 5%;
cursor: pointer;
}
#wrapper {
width: 10%;
padding: px 0;
}
#slider-container {
padding: 20px 50px;
height: 1350px;
top:-18%;
left: -45px;
width: 700px;
overflow: hidden;
position: relative;
}
.slider-view-area {
max-height: 300px;
}
#nav img {
position: absolute;
top: 40px;
left: 0px;
cursor:pointer;
color:grey;
}
#prev {
margin-left: 520px;
font-size: 30px;
}
#next {
right: -440px;
font-size: 30px;
}
#mask {
width: 5000px;
height: 100%;
}
.item {
width: 1200px;
height: 100%;
float: left;
}
.content img {
height: 100px;
width: 17%;
float:left;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
}
.content {
width: 50%;
height: 220px;
top: 30px;
left:
margin: auto;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
.hidden {
display: none;
}
最佳答案
您可以在选择器中更加具体,仅针对 div
中带有 .slider-view-area
类的 img
元素
jQuery(function ($) {
$('.slider-view-area img').hover(function () { // on mouseover
$('.slider-view-area img').stop().not(this).animate({
'opacity': 0.4
}, 700); // you can animate this as well
$(this).animate({
'opacity': 1
}, 700);
}, function () { // on mouseout
$('#.slider-view-area img').animate({
'opacity': 1
}, 700);
});
});
关于javascript - 将箭头与 slider 功能分开,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31070117/