将导航栏颜色更改应用于下拉菜单
问题描述:
我试图将颜色更改应用于导航栏中的文本,以获取以下链接:已访问,当前处于活动状态并正在进行悬停。它对我所有的常规超链接元素都工作正常,但是因为我已经为我的下拉菜单按钮(button class =“dropbtn”)占据了'class'描述符,所以我无法弄清楚如何在改变颜色时用户在下拉菜单中的页面上,或者如何在访问过后更改颜色,因为您从不真正'访问'按钮,只有其中的链接。将导航栏颜色更改应用于下拉菜单
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn:hover {
color: #874c16;
font-size: 20px;
}
.dropbtn:visited {
color: #8b4e14;
}
.dropbtn.active {
color: #ffe7d1;
}
.navbar a:hover {
color: #874c16;
font-size: 20px;
}
.navbar a:visited {
color: #8b4e14;
}
.navbar a.active {
color: #ffe7d1;
}
<div class="navbar">
<a href="index.html">Home</a>
<div class="dropdown">
<button class="dropbtn">Cuisine
\t \t \t \t \t <i class="fa fa-caret-down"></i>
\t \t \t \t \t </button>
<div class="dropdown-content">
<a href="indian.xml">Indian</a>
<a href="italian.xml">Italian</a>
</div>
</div>
<a href="http://www.blogtyrant.com/best-about-us-pages/">About us</a>
<a href="http://www.blogtyrant.com/best-contact-us-pages/">Contact</a>
<a href="https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf">Terms and Conditions</a>
<a href="https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/">Privacy Policy</a>
<a href="datacollect.html">Customer Feedback</a>
</div>
尽管解决方案可能是简单的,我已经在这个很长一段时间,将高度赞赏任何输入。谢谢你们(:
编辑:按钮类更改为锚类也不会在它工作,因为顶部的“美食”锚实际上从未点击,只有锚定体
编辑2:我在我的问题中并不清楚,当用户是一个与其中的任何锚点链接的页面时,我想要“美食”改变颜色。因此,当他们点击“印度”或“意大利”时,我想要美食如果他们说的是主页,我也希望“美食”改变它的默认颜色
答
伪类:visited
:active
不适用于button
元素,但仅限于a
元素。 因此,如果您重写了按钮代码并将其转换为锚点a
元素,则会更好。
$('.dropdown a').click(function() {
$('.dropdown').css('background', 'red');
});
.dropdown:hover .dropdown-content {
display: block;
}
.dropbtn {
display:block;
height: 30px;
line-height:30px;
width: 100px;
text-align: center;
background:#ccc;
border-radius:5px;
border: 1px solid #bbb;
text-decoration: none
}
.dropbtn:hover{
color:#874c16;
font-size:20px;
}
.dropbtn:visited{
color:#8b4e14;
}
.dropbtn.active{
color:#ffe7d1;
}
.navbar a:hover{
color:#874c16;
font-size:20px;
}
.navbar a:visited{
color:#8b4e14;
}
.navbar a.active{
color:#ffe7d1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<a href="index.html" >Home</a>
<div class="dropdown">
<a class="dropbtn" href="#">Cuisine
<i class="fa fa-caret-down"></i>
</a>
<div class="dropdown-content">
<a href="indian.xml">Indian</a>
<a href="italian.xml">Italian</a>
</div>
</div>
<a href="http://www.blogtyrant.com/best-about-us-pages/">About us</a>
<a href="http://www.blogtyrant.com/best-contact-us-pages/">Contact</a>
<a href="https://media.termsfeed.com/pdf/terms-and-conditions-template.pdf">Terms and Conditions</a>
<a href="https://www.visser.com.au/blog/generic-privacy-policy-for-australian-websites/">Privacy Policy</a>
<a href="datacollect.html">Customer Feedback</a>
</div>
我试过了,但它仍然没有因为哪怕是一个锚元素,它实际上从来不点击,因为它是被选中下拉内锚定体工作,所以编译器从来不知道“美食”已经进入。 @Daniele Fois – rodney1234
我没有放弃。也许你需要更好地指定你想要达到的目标。你想点亮下拉菜单中的父元素吗? – DaFois
我想要“美食”改变颜色,当用户在一个页面上,从任何锚点链接。因此,当他们点击“印度”或“意大利”时,我想要美食与其说是主页上的颜色不同。如果过去曾经访问过,我也希望“美食”改变它的默认颜色。对不起,不清楚。 – rodney1234