gpt4 book ai didi

css - 纯 CSS : Multiple on-hover functions are not working

转载 作者:行者123 更新时间:2023-11-28 07:34:30 25 4
gpt4 key购买 nike

谁能告诉我为什么这不起作用?我希望当我将鼠标悬停在框上时,它会打开(从 10 像素宽到 300 像素宽)并显示图片(在框内)。

框和内容独立工作,但当我在悬停时将它们放在一起时它们会发生冲突。

 <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>

<style type="text/css">
.BOX {
width: 10px;
height: 600px;
background: rgba(55, 55, 55, .8);
-webkit-transition-property: width; /* Safari */
-webkit-transition-duration: 4s; /* Safari */
-webkit-transition-delay: 2s; /* Safari */
transition-property: width;
transition-duration: 2s;
transition-delay: 0s;
position: absolute;
z-index:-1;
}

.PICTURE {
position: absolute;
z-index:1;
top: 100px;
left:100px;
visibility:hidden;
}

.BOX:hover + .PICTURE {
visibility:visible;
width: 300px;
}

</style>
</head>
<body>

<div class="BOX"></div>
<div class="PICTURE" style="width: 99px; height: 150px;"><img
src="pic.jpg"></div>
</body>
</html>

最佳答案

尝试添加一些jquery,它更容易。也许这会对您有所帮助:jsfiddle.net/sr6Lsour/

关于css - 纯 CSS : Multiple on-hover functions are not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31312740/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com