[英]jquery .css script doesn't work
早上,我正在尝试显示div onmouseover。 我创建了一个函数,但我不知道出什么问题了。 请问你能帮帮我吗。
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,其中属性显示设置为“ none”;
如果您只想在鼠标悬停时显示<div>
,则不需要任何JS
,可以尝试使用以下方法:
div { display: none; } a:hover + div { display: block; }
<a>Hover over me!</a> <div>Stuff shown on hover</div>
进一步说明:
由于您使用的是display: none;
在容器上,鼠标悬停不会生效,因为该事件未找到<div>
,因为该事件没有首先显示。
希望这可以帮助!
在css文件中,我有一个image_container id,其中属性显示设置为“ none”;
不能将鼠标悬停在没有阻塞的元素上。
您可以使用opacity属性隐藏div。
div { opacity: 0; } div:hover { opacity: 1; }
<div>Stuff shown on hover</div>
我将根据OP提供的内容进行回答。 用包含函数的div
包裹#image_container
,然后它应该可以工作。
并且,由于将鼠标悬停时出现了某些东西但悬停后并没有消失,这很奇怪,因此我添加了另一个onmouseout
功能
function show_img_container() { $("#image_container").css("display", "block"); } function hide_img_container() { $("#image_container").css("display", "none"); }
#image_container { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div onmouseover="show_img_container()" onmouseout="hide_img_container()"> HOVER ME!! <div id="image_container">IM HIDDEN!!!</div> </div>
如果div的显示设置为none,则无法在div上悬停。
好。 我知道这个问题。 在CSS样式表中,我有以下内容:
#image_container {
position: absolute;
height: 120px;
width: 100%;
bottom: 5%;
background-color: black;
opacity: 0;
**transition: all 0.3s ease-in-out 2s;**
z-index: 1;
}
#image_container:hover {
opacity: 1;
}
如果删除过渡属性,它将起作用:`您能告诉我为什么吗?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.