html - 单击链接时保持样式悬停

Question

我试图在单击侧边栏中的链接时保持悬停样式。

我的意思是我点击其中一个链接，然后我想点击另一个链接、按钮或网站中侧边栏以外的任何地方。

我想保留悬停样式，但是当我单击侧边栏中的一个链接时，上一个所选链接中的样式会被删除。

#menu > ul{list-style: none;padding: 0px;}
.col-md-3.temp {
    width: 28%;
}

#menu >ul >li {
    width: 100%;
    padding: 0px;
}

 #tcolor{background-color: #d0cece;height: 93px;
    width: 20%;}
    #tcolor:hover
    {background: -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);}
  
#templatebtn {
    position: absolute;
    border: none;
    background-image: url(../images/Templates_off_ico.png);
    background-repeat: no-repeat;
    background-position: center;
    width: 20%;
    height: 94px;
}

#templatebtn:hover,
#templatebtn:focus{
    background-image: url(../images/Templates_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}

#signaturebtn{
    background-image: url(../images/Signatures_off_ico.png);
    height: 94px;
    width: 20%;
    position: absolute;
    background-repeat: no-repeat;
    border: none;
    background-position: center;
    padding: 0px;
}

#signaturebtn:hover, #signaturebtn:focus{
    background-image: url(../images/Signatures_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);  
}

#contactsbtn{
    background-image: url(../images/Contacts_off_ico.png);
    height: 94px;
    width: 20%;
    position: absolute;
    background-repeat: no-repeat;
    border: none;
    background-position: center;
}

#contactsbtn:hover, #contactsbtn:focus{
    background-image: url(../images/Contacts_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
   
}

#clipsbtn{
    background-image: url(../images/Clips_off_ico.png);
    height: 94px;
    width: 20%;
    position: absolute;
    background-repeat: no-repeat;
    border: none;
    background-position: center; 
}

#clipsbtn:hover, #clipsbtn:focus{
    background-image: url(../images/Clips_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}

#librariesbtn{
    background-image: url(../images/Libraries_off_ico.png);
    height: 94px;
    width: 20%;
    position: absolute;
    background-repeat: no-repeat;
    border: none;
    background-position: center; 
}

#librariesbtn:hover, #librariesbtn:focus{
    background-image: url(../images/Libraries_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%); 
}

#usersbtn{
    background-image: url(../images/Users_off_ico.png);
    height: 94px;
    width: 20%;
    position: absolute;
    background-repeat: no-repeat;
    border: none;
    background-position: center;  
}

#usersbtn:hover, #usersbtn:focus {
    background-image: url(../images/Users_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%); 
}

<div id="menu"> 
            <ul>
                <li></li>
                <li>
                    <div id="tcolor"><a href="#templates" id="templatebtn"></a></div>
                </li>
                <li>
                   <div id="tcolor"><a href="#signatures" id="signaturebtn"></a></div>  
                </li>
                <li>
                   <div id="tcolor"> <a href="#contacts" id="contactsbtn"></a></div>  
                </li>
                <li>
                   <div id="tcolor"> <a href="#clips" id="clipsbtn"></a></div> 
                </li>
                <li>
                  <div id="tcolor"> <a href="#libraries" id="librariesbtn"></a></div>  
                </li>
                <li>
                   <div id="tcolor"> <a href="#users" id="usersbtn"></a></div>  
                </li>
            </ul>
    </div>

Answer 1

如果你想尝试一下 jQuery，这里有一个例子，它是如何为你工作的。首先，我将 #tcolor 替换为 .tcolor ，ID 必须是唯一的，如果你想设置 > 1 元素的样式同样的 CSS 规则，使用类。对于您的 anchor 链接，您不必一次又一次地重新定义每个按钮样式，只需统一类 objective-c SS 规则中的所有相似之处，并通过使用 ID objective-c SS 规则应用差异。

更多关于 CSS class selectors

更多关于 CSS ID selectors

看看下面的代码片段。

   
$('.tcolor > a').click(function() {
  $('.tcolor').removeClass('hovered');
  $(this).parent().toggleClass('hovered');
});

/* Added */

html * {
  box-sizing: border-box;
}
/* */

#menu > ul {
  list-style: none;
  padding: 0px;
}
.col-md-3.temp {
  width: 28%;
}
#menu >ul >li {
  width: 100%;
  padding: 0px;
}
.tcolor {
  background-color: #d0cece;
  height: 93px;
  width: 20%;
}
.tcolor:hover {
  background: -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}
/* Added */

.tcolor.hovered {
  background: -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}
.tcolor > a {
  text-align: center;
  padding: 35px 0;
  color: #FFF;
  text-decoration: none;
  font-family: Verdana;
}
/* */

#templatebtn {
  position: absolute;
  border: none;
  background-image: url(../images/Templates_off_ico.png);
  background-repeat: no-repeat;
  background-position: center;
  width: 20%;
  height: 94px;
}
#templatebtn:hover,
#templatebtn:focus {
  background-image: url(../images/Templates_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}
#signaturebtn {
  background-image: url(../images/Signatures_off_ico.png);
  height: 94px;
  width: 20%;
  position: absolute;
  background-repeat: no-repeat;
  border: none;
  background-position: center;
}
#signaturebtn:hover,
#signaturebtn:focus {
  background-image: url(../images/Signatures_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}
#contactsbtn {
  background-image: url(../images/Contacts_off_ico.png);
  height: 94px;
  width: 20%;
  position: absolute;
  background-repeat: no-repeat;
  border: none;
  background-position: center;
}
#contactsbtn:hover,
#contactsbtn:focus {
  background-image: url(../images/Contacts_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}
#clipsbtn {
  background-image: url(../images/Clips_off_ico.png);
  height: 94px;
  width: 20%;
  position: absolute;
  background-repeat: no-repeat;
  border: none;
  background-position: center;
}
#clipsbtn:hover,
#clipsbtn:focus {
  background-image: url(../images/Clips_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}
#librariesbtn {
  background-image: url(../images/Libraries_off_ico.png);
  height: 94px;
  width: 20%;
  position: absolute;
  background-repeat: no-repeat;
  border: none;
  background-position: center;
}
#librariesbtn:hover,
#librariesbtn:focus {
  background-image: url(../images/Libraries_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}
#usersbtn {
  background-image: url(../images/Users_off_ico.png);
  height: 94px;
  width: 20%;
  position: absolute;
  background-repeat: no-repeat;
  border: none;
  background-position: center;
}
#usersbtn:hover,
#usersbtn:focus {
  background-image: url(../images/Users_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="menu">
  <ul>
    <li></li>
    <li>
      <div class="tcolor"><a href="#templates" id="templatebtn">Link 1</a>
      </div>
    </li>
    <li>
      <div class="tcolor"><a href="#signatures" id="signaturebtn">Link 2</a>
      </div>
    </li>
    <li>
      <div class="tcolor"> <a href="#contacts" id="contactsbtn">Link 3</a>
      </div>
    </li>
    <li>
      <div class="tcolor"> <a href="#clips" id="clipsbtn">Link 4</a>
      </div>
    </li>
    <li>
      <div class="tcolor"> <a href="#libraries" id="librariesbtn">Link 5</a>
      </div>
    </li>
    <li>
      <div class="tcolor"> <a href="#users" id="usersbtn">Link 6</a>
      </div>
    </li>
  </ul>
</div>