删除鼠标点击并添加边框到简单 Javascript

Question

提前问候并感谢您的帮助。我在 javascript 的第一次黑客攻击。只是尝试在滑块周围添加一个 2em 的黑色边框，并在将鼠标悬停在滑块上时移除鼠标指针（我不想提供图片中的链接）。

Link 是：www.bakashana.org/test-slider

完整代码如下：

<html>
<head>
<script language="JavaScript1.1">
<!--

var slideimages=new Array()
function slideshowimages(){
for (i=0;i<slideshowimages.arguments.length;i++){
slideimages[i]=new Image()
slideimages[i].src=slideshowimages.arguments[i]
}
}
//-->
</script>

</head>
<body>
<center><a href="javascript:slideshowimages()"><img src="https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-girls-jump-compressor-400x300_c.jpg" name="slide" border="2em" width=400 height=300></a></center>
<script>
<!--

//configure the paths of the images, plus corresponding target links
slideshowimages("https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-girls-jump-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/All-the-ladies-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/highcompress-banner20-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/banner10-1-compressor-400x300_c.jpg","https://secureservercdn.net/198.71.233.163/4b5.320.myftpupload.com/wp-content/uploads/2019/09/cropped-banner-testing-compressor-400x300_c.jpg")

//configure the speed of the slideshow, in miliseconds
var slideshowspeed=2000

var whichimage=0
function slideit(){
if (!document.images)
return
document.images.slide.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",slideshowspeed)
}
slideit()

//-->
</script>

</body>
</html>

Answer 1

好的，就像你在评论中提到的那样。使用简单的 CSS:By 删除光标，将 cursor:none 属性添加到滑块并使用伪 class :hover 检查光标是否悬停在给定的 div 和然后将 border 属性应用于它，另一方面禁用鼠标点击你的滑块，但我们需要使用 jquery 为此我在代码片段工作中添加了 jquery下面的例子。

 var event = $("#yourSlider").click(function(e) {
    e.stopPropagation();
    e.preventDefault();
    e.stopImmediatePropagation();
    return false;
});

// disable right click
$("#yourSlider").bind('contextmenu', function(e) {
    e.stopPropagation();
    e.preventDefault();
    e.stopImmediatePropagation();
    return false;
});

#yourSlider{
    background:orange;
    width:400px;
    height:300px;
    cursor:none;
}
#yourSlider:hover{
  border:1px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="yourSlider"></div>

Answer 2

谢谢大家的帮助！我尝试了上述解决方案，但无法使它们正常工作（滚动时继续看到鼠标手）。我找到了最简单的解决方案，我想我会 post 给其他人看。

<style>
#yourSlider{
    width:400px !important;
    height:300px !important;
    border:.2em solid black;
    pointer-events:none !important;

}
</style>

'pointer-events:none !important' 解决了滚动问题（没有添加 !important 就无法工作），而 border 解决了边框问题。

再次感谢所有贡献者！

删除鼠标点击并添加边框到简单 Javascript

Removing mouseclick and adding border to simple Javascript

javascript

mouseover