gpt4 book ai didi

html - 将鼠标悬停在 div 上不影响 div

转载 作者:太空宇宙 更新时间:2023-11-03 23:29:43 26 4
gpt4 key购买 nike

我在我的 CSS 中为某些 div 创建了一些悬停条件。其一,我测试了父关系转换 (#playing-field:hover #cont2),另一个我测试了 self 转换 (#piccont2:hover),两者似乎都无法正常工作。我唯一可能开始工作的悬停是 a:hover。

一般样式中是否有某些东西阻止了这些悬停过渡?还是我对如何制作可悬停的 div 有误解?

http://jsfiddle.net/t3s8hxcL/

a:hover {
color:green;
}

html, body {
font-size: 18px;
color: white;
font-family:'Oswald', sans-serif;
margin: 0;
padding: 0;
overflow:hidden;
height:100%;
width:100%;
}

#header {
height: 10vh;
/*100 */
background: #ed3144;
/* ruby */
text-align: right;
position: relative;
box-shadow: 0px 5px 3px black;
}

#footer {
height: 13.5vh;
/*100 */
background: #181616;
/* almost black */
text-align: right;
position: relative;
top: -6vh;
z-index: -1;
}

#above-footer {
height: 3vh;
background: #FFD700;
position: relative;
top: -13vh;
z-index: 0;
}

#header-content {
position:absolute;
bottom:5px;
right: 10px;
}

#dropbin {
position: relative;
text-align:center;
}

#dropbinbar {
height:3.5vh;
/*35*/
background: #181616;
/* almost black */
z-index: -3;
}

#bin {
height: 6vh;
/*60*/
width: 13%;
background: #635856;
/*greyish*/
z-index: -1;
box-shadow: -5px 5px 3px #181616;
text-align: center;
float:left;
}

#bin-content {
position:absolute;
text-align: center;
/*text-transform: uppercase;*/
font-size: 30px;
font-size: 1.5vw;
font-weight: normal;
bottom: .5vw;
width: 100%;
}

#playing-field {
height:73vh;
/*865*/
clear:both;
overflow: hidden;
position:relative;
top: -6vh;
z-index: -10;
}

#playing-field:hover #cont2 {
height: 80%;
background: #ed3144;
}

#piccont1 {
width: 200px;
height: 200px;
background-color: #ed3144;
/* ruby */
margin:0 auto;
position: absolute;
top: -webkit-calc(50% - 100px);
top: -moz-calc(50% - 100px);
top: -calc(50% - 100px);
left: -webkit-calc(25% - 100px);
left: -moz-calc(25% - 100px);
left: -calc(25% - 100px);
z-index: 0;
}

#piccont2 {
width: 200px;
height: 200px;
background-color: black;
margin: 0 auto;
position: absolute;
top: -webkit-calc(50% - 100px);
top: -moz-calc(50% - 100px);
top: -calc(50% - 100px);
left: -webkit-calc(75% - 100px);
left: -moz-calc(75% - 100px);
left: -calc(75% - 100px);
z-index: 0;
}

#cont1 {
width: 50%;
height: 100%;
float: left;
background: black;
z-index: -4;
}

#cont2 {
width: 50%;
height: 100%;
float: right;
background: #ed3144;
z-index: -3;
}

#piccont2:hover :
-webkit-transform: translate(3em, 0);
-moz-transform: translate(3em, 0);
-o-transform: translate(3em, 0);
-ms-transform: translate(3em, 0);
left: -webkit-calc(50% - 100px);
left: -moz-calc(50% - 100px);
left: -calc(50% - 100px);
background-color: #ed3144;
}

最佳答案

您正在使用负 Z 索引,将几乎所有内容都放在 body 后面在 Z 堆栈中,表示 hover单个元素的行为永远不会被触发。您可以看到,如果您在 #contX 上点击“检查元素”元素 Chrome 将选择 <body>因为这是它在该位置找到的第一个元素,自上而下。

不要使用小于 0 的 Z 值,除非你有充分的理由这样做,并且清楚地知道后果,这是 CSS 的复杂部分。

关于html - 将鼠标悬停在 div 上不影响 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25734036/

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