早上好, 我试图在鼠标悬停时显示一个 div。我创建了一个函数,但我不知道出了什么问题。你能帮帮我吗?
HTML代码:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title> PHOTOGALLERY</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="css/smoothness/jquery-ui-
1.9.2.custom.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js">
</script>
<script>
function show_img_container() {
$("#image_container").css("display", "block");
}
</script>
</head>
<body>
<div id="div_container">
<div id="div_image" class="cycle-slideshow">
<img src="images/2.jpg" style="height:100%; width:100%">
<img src="images/3.jpg" style="height:100%; width:100%">
<img src="images/4.jpg" style="height:100%; width:100%">
<img src="images/5.jpg" style="height:100%; width:100%">
</div>
<div id="image_container" onmouseover="show_img_container()"></div>
</div>
</body>
</html>
在 css 文件中,我有一个 image_container id,其中属性显示设置为“无”;
最佳答案
如果你只想显示<div>
在悬停时你不需要任何 JS
你可以尝试这样的事情:
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
进一步解释:
由于您使用的是 display: none;
在容器上,鼠标悬停不会生效,因为 <div>
事件无法找到,因为它一开始就没有显示。
希望这对您有所帮助!
关于javascript - jquery .css 脚本不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44452203/