javascript - 删除鼠标点击并为简单的 Javascript 添加边框
问题描述
问候并提前感谢您的帮助。我对 javascript 的第一次 hack。只是试图在滑块周围添加一个 2em 黑色边框,并在将鼠标悬停在滑块上时移除鼠标指针(我不希望提供图片中的链接)。
链接是: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>
解决方案
好的,正如您在评论中提到的那样。使用简单的 CSS 删除光标:通过向cursor:none
滑块添加属性并使用伪类: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>
推荐阅读
- javascript - 在javascript中运行动画函数后如何添加函数/元素动作?
- .net - 如何设置 Visual Studio Pack 默认发布而不是像发布按钮这样的当前模式
- python - 如何在 Android Studio 项目中添加 Python Selenium 脚本
- spring-boot - 在 Spring Boot 的 LDAP 身份验证中使用 sAMAccountName 而不是 userPrincipalName
- java - 二元运算符 '<=' , '+=' 的错误操作数类型
- jquery - 如何在 jQuery select2 远程选择框中设置默认选择值的排序?
- php - 如何确定一行中是否有 X 个时隙?
- sql - 比较 PostgreSQL 中的两列仅显示最高值
- c# - 我无法让 OnMouseOver() 注意到我的鼠标悬停在 c# (Unity) 中的按钮上
- ios - travisci:对包进行代码签名,无法导入我的开发人员凭据之一