悬停时显示 div : div 悬停时未显示
Show div on hover : div didn't show on hover
我有这个代码:
#banner {-webkit-border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -moz-border-radius-topleft: 100px; -moz-border-radius-topright: 100px; border-top-left-radius: 100px; border-top-right-radius: 100px; position:relative;}
#submenu { color: #fff; margin: 0 2%; position: relative; bottom: -0px; text-align: center; font-family: Oswald; font-weight: 700; font-size: 15px; padding:3px; z-index:1; visibility:hidden; opacity:0; -webkit-transition:300ms; -moz-transition:300ms; -o-transition:300ms; transition:300ms; }
#banner:hover #submenu { visibility:visible; opacity:1; }
当我将鼠标悬停在 #banner
ID 上时,#submenu
不会显示。我做错了什么吗?
感谢您的帮助。
编辑:这是 HTML 代码,如有必要:
<div id="banner"><div id="submenu">foo</div></div>
检查这个:http://jsfiddle.net/4mcz0axk/
Div 正在显示,但颜色文本为白色,因此可能不可见。
在 fiddle 共享中,我特意将其更改为黑色,并且工作正常。
#banner {
-webkit-border-top-left-radius: 100px;
-webkit-border-top-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: relative;
}
#submenu {
color: black;
margin: 0 2%;
position: relative;
bottom: -0px;
text-align: center;
font-family: Oswald;
font-weight: 700;
font-size: 15px;
padding: 3px;
z-index: 1;
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
#banner:hover #submenu {
visibility: visible;
opacity: 1;
}
我有这个代码:
#banner {-webkit-border-top-left-radius: 100px; -webkit-border-top-right-radius: 100px; -moz-border-radius-topleft: 100px; -moz-border-radius-topright: 100px; border-top-left-radius: 100px; border-top-right-radius: 100px; position:relative;}
#submenu { color: #fff; margin: 0 2%; position: relative; bottom: -0px; text-align: center; font-family: Oswald; font-weight: 700; font-size: 15px; padding:3px; z-index:1; visibility:hidden; opacity:0; -webkit-transition:300ms; -moz-transition:300ms; -o-transition:300ms; transition:300ms; }
#banner:hover #submenu { visibility:visible; opacity:1; }
当我将鼠标悬停在 #banner
ID 上时,#submenu
不会显示。我做错了什么吗?
感谢您的帮助。
编辑:这是 HTML 代码,如有必要:
<div id="banner"><div id="submenu">foo</div></div>
检查这个:http://jsfiddle.net/4mcz0axk/ Div 正在显示,但颜色文本为白色,因此可能不可见。 在 fiddle 共享中,我特意将其更改为黑色,并且工作正常。
#banner {
-webkit-border-top-left-radius: 100px;
-webkit-border-top-right-radius: 100px;
-moz-border-radius-topleft: 100px;
-moz-border-radius-topright: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
position: relative;
}
#submenu {
color: black;
margin: 0 2%;
position: relative;
bottom: -0px;
text-align: center;
font-family: Oswald;
font-weight: 700;
font-size: 15px;
padding: 3px;
z-index: 1;
visibility: hidden;
opacity: 0;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
}
#banner:hover #submenu {
visibility: visible;
opacity: 1;
}