Css 如何基于父div:hover转换a:links
我在左下角有一个菜单,在这个特定的div中,我有几个CSS3在a:link和a:hover之间的转换,包括颜色、行高、字母间距和文本阴影。我还有一个div.floating-menu和div.floating-menu之间的转换,它会影响整个div的行高度,有效地将这个浮动菜单折叠到页面底部 我在这个分区中只有链接和h1 我希望菜单被折叠,链接是透明的(黑色也可以),然后将鼠标悬停在div上展开,并使链接转换为不透明(或返回白色) 当菜单崩溃时,我似乎无法让链接消失。有办法做到这一点吗 以下是菜单的HTML和CSS:Css 如何基于父div:hover转换a:links,css,css-transitions,Css,Css Transitions,我在左下角有一个菜单,在这个特定的div中,我有几个CSS3在a:link和a:hover之间的转换,包括颜色、行高、字母间距和文本阴影。我还有一个div.floating-menu和div.floating-menu之间的转换,它会影响整个div的行高度,有效地将这个浮动菜单折叠到页面底部 我在这个分区中只有链接和h1 我希望菜单被折叠,链接是透明的(黑色也可以),然后将鼠标悬停在div上展开,并使链接转换为不透明(或返回白色) 当菜单崩溃时,我似乎无法让链接消失。有办法做到这一点吗 以下是菜
<div class="floating-menu">
<br /><br />
<a href="#">index</a>
<a href="#">search</a>
<a href="#">help</a>
<a href="#">members</a>
<a href="#">calendar</a>
<br />
<h1>menu</h1>
<br/>
</div>
以下是jquery解决方案和工作演示->
$('.floating-menu').mouseover(function() {
$('.floating-menu a').css("display","block");
});
$('.floating-menu').mouseleave(function() {
$('.floating-menu a').css("display","none");
});
以下是jquery解决方案和工作演示->
$('.floating-menu').mouseover(function() {
$('.floating-menu a').css("display","block");
});
$('.floating-menu').mouseleave(function() {
$('.floating-menu a').css("display","none");
});
(仅CSS修复)添加了不透明度:0代码>至div.floating-menu a:链接,div.floating-menu a:已访问和不透明度:1代码>至div.floating-menu:悬停a:链接,div.floating-menu a:已访问
div.floating-menu {
position: fixed;
bottom: 10px;
left: 10px;
width: 120px;
z-index: 100;
padding-left: 10px;
line-height: 0px;
transition: all 1s;
opacity: 1;
}
div.floating-menu:hover {
line-height: 9px;
opacity: 1;
}
div.floating-menu a, div.floating-menu h1 {
display: block;
margin: 0 0.5em;
}
/*ADDED A '0 OPACITY'*/
div.floating-menu a:link, div.floating-menu a:visited {
color: #888888;
letter-spacing: -1px;
transition: all 1s;
text-shadow: 0 0 2px #cccccc;
opacity: 0;
}
/*ADDED A '1 OPACITY' ON MENU HOVER*/
div.floating-menu:hover a:link, div.floating-menu a:visited {
opacity:1;
}
div.floating-menu a:hover {
letter-spacing: 1px;
color: #ffffff;
color: #cccccc;
text-shadow: 0 0 2px #ffffff;
line-height: 13px;
}
div.floating-menu h1 {
color: #000000;
text-shadow: 0 0 25px #ffffff;
opacity: 1;
align: left;
}
(仅CSS修复)添加了不透明度:0代码>至div.floating-menu a:链接,div.floating-menu a:已访问和不透明度:1代码>至div.floating-menu:悬停a:链接,div.floating-menu a:已访问
div.floating-menu {
position: fixed;
bottom: 10px;
left: 10px;
width: 120px;
z-index: 100;
padding-left: 10px;
line-height: 0px;
transition: all 1s;
opacity: 1;
}
div.floating-menu:hover {
line-height: 9px;
opacity: 1;
}
div.floating-menu a, div.floating-menu h1 {
display: block;
margin: 0 0.5em;
}
/*ADDED A '0 OPACITY'*/
div.floating-menu a:link, div.floating-menu a:visited {
color: #888888;
letter-spacing: -1px;
transition: all 1s;
text-shadow: 0 0 2px #cccccc;
opacity: 0;
}
/*ADDED A '1 OPACITY' ON MENU HOVER*/
div.floating-menu:hover a:link, div.floating-menu a:visited {
opacity:1;
}
div.floating-menu a:hover {
letter-spacing: 1px;
color: #ffffff;
color: #cccccc;
text-shadow: 0 0 2px #ffffff;
line-height: 13px;
}
div.floating-menu h1 {
color: #000000;
text-shadow: 0 0 25px #ffffff;
opacity: 1;
align: left;
}
这里有打字错误align:left代码>这不是构建语义逻辑菜单的方式!将ul
与列表项一起使用。您在此处输入错误align:left代码>这不是构建语义逻辑菜单的方式!使用带有列表项的ul
。这太棒了!谢谢当它出现和消失时,有没有办法使它褪色?还有,我该如何实现这一点?我需要在一个相当封闭的编辑器中内联完成这项工作……这里是fadeIn/Out效果的工作演示:我还建议您使用Jquery。在您的解决方案的这种情况下,您可以看到,在某些情况下,当您悬停菜单时会出现故障。使用Jquery,这将非常有效。在html文档中,在head标记中,您需要实现以下脚本:
,然后您可以在正文中打开
标记,并可以从演示中粘贴jquery代码。这是jQueryAPI,我希望它能帮助您:太棒了!谢谢当它出现和消失时,有没有办法使它褪色?还有,我该如何实现这一点?我需要在一个相当封闭的编辑器中内联完成这项工作……这里是fadeIn/Out效果的工作演示:我还建议您使用Jquery。在您的解决方案的这种情况下,您可以看到,在某些情况下,当您悬停菜单时会出现故障。使用Jquery,这将非常有效。在html文档中,在head标记中,您需要实现以下脚本:
,然后您可以在正文中打开
标记,并可以从演示中粘贴jquery代码。这是jQueryAPI,我希望这能帮助你:谢谢Walry的清理,对于所有的hahaThanks Walry的清理来说,早上太早了,对于所有这些,哈哈