javascript - jQuery mouseenter 和 mouseleave 处理程序无法正常工作

Question

我一直在拼命地尝试解决我的问题，但我就是没有在我的代码中找到错误。所以我正在编程的是一个与 jQuery 一起工作的 slider ，我拥有我想要的一切，但后来我做了一些完全不相关的更改，它不再工作了。我的问题是(正如您在 jsfiddle 中看到的那样)导航 slider 的箭头不会(总是)出现。它们只出现在间隔的最后(参见 jsfiddle)。我对 .mouseenter 和 .mouseleave 处理程序做错了吗？ 您会推荐使用 `.hover-handler 吗？

提前致谢

JSFiddle:http://jsfiddle.net/VincentBS/ogm967bz

如果这有帮助:Here是为 slider 编程的网站

$(document).ready(function(){


	hideArrows();
	hideImages();

	$(".back").click(function(){prevImage()});

	$(".pre").click(function(){nextImage()});

	$("#slider").mouseenter(function(){ 
		//showArrows();
		$(".back").show();
		$(".pre").show();
	})

	$("#slider").mouseleave(function(){ 
		//hideArrows();
		$(".back").hide();
		$(".pre")	 .hide();
	})

	start();

});

function hideArrows(){

	$(".back").hide();
	$(".pre")	 .hide();
}

function showArrows(){

	$(".back").show();
	$(".pre")	 .show();
}

function hideImages(){

	$("#2").hide();
	$("#3").hide();
	$("#4").hide();
	$("#5").hide();
}

function start(){
    
    // save when we started for calculating progress
    var startedAt = Date.now();
    
    // set animation bounds
    var startValue = 1;
    var endValue   = 100;

    // figure out how much change we have over the whole animation
    var delta = endValue - startValue;

    // Animation function, to run at 60 fps.
    t = setInterval(function(){
        
        // How far are we into the animation, on a scale of 0 to 1.
        var progress = (Date.now() - startedAt) / 5000;
        
        // If we passed 1, the animation is over so clean up.
        if (progress > 1) {
         nextImage();   
        }
        
    }, 1000 / 60);

}

function prevImage(){	

	var id = document.getElementsByClassName("activeslider")[0].id;
	var next = parseInt(id) - 1;
	if(next < 1){next = 5}
	next = "#" + next.toString();
	id = "#" + id.toString();
	$(id).removeClass("activeslider").fadeOut();
	$(next).addClass("activeslider").fadeIn();
	clearInterval(t);
	start();
}

function nextImage(){	

	var id = document.getElementsByClassName("activeslider")[0].id;
	var next = parseInt(id) + 1;
	if(next > 5){next = 1}
	next = "#" + next.toString();
	id = "#" + id.toString();
	$(id).removeClass("activeslider").fadeOut();
	$(next).addClass("activeslider").fadeIn();
	clearInterval(t);
	start();
}

#slider {

	float: left;
	width: 700px;
	height: 233px;
}

.back, .pre {

	background-color: #EB5A00;
	opacity: 1;
	margin-top: 92px;
	color: #FFF;
	font-size: 25px;
	text-align: center;
	padding: 12.5px 7.5px;
	cursor: pointer;
	z-index: 1001;

}

.back {
	float: left;
	margin-left: 10px;
}

.pre {
	float: right;
	margin-right: 10px;
}

#slider, .back, .pre {
	-webkit-user-drag: none;
	-moz-user-select: none;
	user-drag: none;
}

.sliderimage {
	width: 100%;
}

#slider img {
	position: absolute;
	width: 700px;
	-webkit-user-drag: none;
	-moz-user-select: none;
	user-drag: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
    <img class="sliderimage activeslider" src="http://dev.hvgg.de/file_upload/data15749.jpg" id="1" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15750.jpg" id="2" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15751.jpg" id="3" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15752.jpg" id="4" />
    <img class="sliderimage" src="http://dev.hvgg.de/file_upload/data15753.jpg" id="5" />
    <span class="back">&#9664;</span>
	<span class="pre">&#9654;</span>
</div>

Answer 1

位置问题我已经改变了一些css属性

    #slider {

    float: left;
    width: 700px;
    height: 233px;
  position: relative;
}

.back, .pre {

    background-color: #EB5A00;
    opacity: 1;
    color: #FFF;
    font-size: 25px;
  position: absolute;
    text-align: center;
    padding: 12.5px 7.5px;
    cursor: pointer;
    z-index: 1001;

}

.back {
     left: 0;
    margin-left: 10px;
    top: 50%;
}

.pre {
      margin-right: 10px;
    right: 0;
    top: 50%;
}

#slider, .back, .pre {
    -webkit-user-drag: none;
    -moz-user-select: none;
    user-drag: none;
}

.sliderimage {
    width: 100%;
}

#slider img {
    position: absolute;
    width: 700px;
    -webkit-user-drag: none;
    -moz-user-select: none;
    user-drag: none;
}

http://jsfiddle.net/ogm967bz/1/