我尝试使用 div 制作菜单 JSFiddle here
这是我的CSS:
#footer {
bottom:0px;
height:70px;
left:0px;
position:absolute;
width:100%!important;
z-index:100;
background-color: rgba(255,255,255,0.5)!important;
}
#footer .menu {
height:54px;
color:#000;
}
.footerFloat {
display:inline-block;
width: 25%;
float: left;
min-width:200px;
}
.footerh4 {
font-size: 18px;
font-weight: 700;
font-family: 'Open Sans', sans-serif;
text-align: center;
line-height: 20px;
}
.footertoptxt {
font-size: 14px;
font-family: 'Lato', sans-serif;
text-align: center;
line-height: 14px;
}
.top25 {
margin-top: 20px;
}
.top30 {
margin-top: 30px;
}
a.footer-fill {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
div.clickable a {
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
text-decoration:none;
z-index:10;
opacity: 0;
filter: alpha(opacity=1);
}
div.clickable {
position: relative;
height: 70px;
}
div.clickable:hover{
background-color: rgba(0,0,0,0.6);
color: #fff;
}
这里是 html:
<div id="footer">
<div class="menu">
<div class="footerFloat footerfill clickable">
<a href="#"></a>
<div class="footerh4 top30">Home</div>
</div>
<div class="footerFloat footerfill clickable">
<a href="#"></a>
<div class="footertoptxt top25">Lorem Ipsum in</div>
<div class="footerh4">Store Lorem Ipsum</div>
</div>
<div class="footerFloat clickable">
<a href="#"></a>
<div class="footertoptxt top25">Lorem Ipsum in</div>
<div class="footerh4">Corporate Lorem Ipsum</div>
</div>
<div class="footerFloat clickable">
<a href="#"></a>
<div class="footertoptxt top25">Lorem Ipsum</div>
<div class="footerh4">Lorem Ipsum</div>
</div>
</div>
</div>
有没有办法让当前打开的链接的背景为不透明的黑色?就像当我在“主页”页面上时,页脚中的主页将具有不透明的黑色背景,等等。
我正在 Wordpress 网站上使用它。
为我乱七八糟的代码道歉。这是我让它看起来像我喜欢的样子的唯一方法。
最佳答案
这是执行此操作的简单 jquery 代码:
jQuery :
$(document).ready(function() {
$("#footer a").click(function() {
$("#footer a").parent().removeClass('active');
$(this).parent().addClass('active');
});
});
CSS:
.active {
background-color: rgba(0,0,0,0.6);
color: #fff;
}
关于html - 如何使用 div 突出显示具有背景颜色的当前事件链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29273265/