Question

我尝试对我的导航栏中的文字应用颜色更改，以获取以下链接：已访问过，当前处于活动状态以及正在悬停的链接。它适用于我所有的常规超链接元素，但是因为我已经占据了这个班级＆＃39;我的下拉菜单按钮的描述符（按钮类=＆＃34; dropbtn＆＃34;），我无法弄清楚当用户在下拉菜单中的页面上时如何更改颜色，或者如何一旦访问它就会改变颜色，因为你从来没有真正地访问过＃39;按钮，只有其中的链接。

＆＃13;

.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;
}

＆＃13;

<div class="navbar">
  <a href="index.html">Home</a>
  <div class="dropdown">
    <button class="dropbtn">Cuisine 
					  <i class="fa fa-caret-down"></i>
					</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>

＆＃13;

尽管解决方案可能很简单，但我已经在这方面做了很长时间并且非常感谢任何输入。谢谢你们（：

编辑：将按钮类更改为锚类也不起作用，因为顶级＆＃34;烹饪＆＃34;从未实际点击过锚，只有其中的锚元素。

编辑2：我的问题并不清楚，我想要＆＃34;烹饪＆＃34;当用户是从其中任何锚点链接的页面之一时更改颜色。所以，当他们点击＆＃34;印度＆＃34;或者＆＃34;意大利语＆＃34;，如果他们在主页上说，我希望美食是一种不同的颜色。我也想要＆＃34;美食＆＃34;如果过去曾访问过它，则更改其默认颜色。

Answer 1

伪类: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>

将导航栏颜色更改应用于下拉菜单

1 个答案: