单击链接时保持样式悬停

时间：2015-08-31 20:54:09

标签： html css

当点击侧栏中的链接时，我试图保持悬停样式。

我的意思是我点击其中一个链接，之后，我想点击另一个链接，按钮或网站中的任何一个位置。

我想保留悬停样式，但是当我点击侧栏中的一个链接时，前一个链接中的样式将被删除。

＆＃13;
＆＃13; 
#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%); 
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

如果您想尝试jQuery，下面是一个示例，它将如何为您服务。首先，我已将#tcolor替换为.tcolor，ID必须是唯一的，如果要使用相同的CSS规则设置> 1个元素，请使用类。对于您的锚链接，您不必一次又一次地重新定义每个按钮样式，只需统一类目标CSS规则中的所有相似性，并使用ID目标CSS规则应用差异。

有关 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>

答案 1 :(得分：0)

首先，我想指出在有效的HTML中，id属性应该在页面上是唯一的。因此，我建议将id="tcolor"更改为class="tcolor"。您可以使用句点（.class）而不是数字符号（#id）来引用css中的class属性。您可以通过用空格（class="class1 class2"）分隔名称来为单个元素设置多个类属性值。

现在回答你的实际问题：

如果没有JavaScript，我不会想你想做什么。以下示例使用jQuery library。没有这个库就可以做到这一点，但它很常见，并且使得很多跨浏览器的东西变得容易，我推荐它。

通过以下解决方案，我的印象是您可能希望:hover的样式与.selected明显不同，因此您可以将它们分开，但是设计选择。

＆＃13;
＆＃13; 
// This will run on page load
$(function(){
    // This binds a handler to the click event of any <li> 
    // in #menu (even if the <li> did not exist on page load, 
    // as long as #menu did)
    $('#menu').on('click', 'li',function(){
        // Add class="selected" to the <li> clicked on
        // and removes any class="selected" from the ones who weren't
        $(this).addClass('selected')
            .siblings()
            .removeClass('selected');
    });
});
＆＃13; 
#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,
    #menu li.selected .tcolor
    {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,
#menu li.selected #templatebtn{
    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,
#menu li.selected #signaturebtn{
    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,
#menu li.selected #contactsbtn{
    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,
#menu li.selected #clipsbtn{
    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,
#menu li.selected #librariesbtn{
    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,
#menu li.selected #usersbtn {
    background-image: url(../images/Users_on_ico.png), -webkit-linear-gradient(left, #16bdcf 10%, #3f3736 10%);
}
＆＃13; 
<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"></a>
            </div>
        </li>
        <li>
            <div class="tcolor">
                <a href="#signatures" id="signaturebtn"></a>
            </div>
        </li>
        <li>
            <div class="tcolor">
                <a href="#contacts" id="contactsbtn"></a>
            </div> 
        </li>
        <li>
            <div class="tcolor">
                <a href="#clips" id="clipsbtn"></a>
            </div> 
        </li>
        <li>
            <div class="tcolor">
                <a href="#libraries" id="librariesbtn"></a>
            </div>
        </li>
        <li>
            <div class="tcolor">
                <a href="#users" id="usersbtn"></a>
            </div>  
        </li>
    </ul>
</div>
＆＃13;
＆＃13;
＆＃13;

现在，我注意到您的<li>标记的宽度为100％，因此点击它们右侧的任意位置会触发事件处理程序，但可以通过将<ul>置于只占用所需的空间。

答案 2 :(得分：-1)

您需要修改:visited属性。

:visited CSS伪类允许您仅选择已访问过的链接。此样式可能会被后续规则中出现的任何其他与链接相关的伪类（:link，:hover和:active覆盖。为了设置适当的链接样式，您需要将:visited规则放在:link规则之后但在LVHA订单中定义的其他规则之前：:link - :visited - :hover - :active。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/%3Avisited

相关问题
最新问题