Сохраняйте стиль наведения при нажатии ссылки

Я пытаюсь сохранить стиль наведения при нажатии ссылки в боковой панели.Сохраняйте стиль наведения при нажатии ссылки

Я имею в виду, что я нажимаю на одну из ссылок, и после этого я хочу нажать на другую ссылку, кнопку или любое место на сайте из боковой панели.

Я хочу сохранить стиль наведения, но когда я нажимаю на одну из ссылок в боковой панели, стиль в предыдущей ссылке удаляется.

#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>

источник

2015-08-31 alsuelo

Использует jQuery вариант для вас? –

Может быть, но если возможно с css будет здорово! – alsuelo

@alsuelo Селектор ': visited' работал для вас? – Onilol

Если вы хотите, чтобы дать JQuery попробовать, вот пример того, как она будет работать для вас. Прежде всего, я заменил #tcolor на .tcolor, ID должен быть уникальным, если вы хотите стилизовать элементы > 1 с тем же правилом CSS, используйте классы. То же самое для ваших привязанных ссылок, вам не нужно переопределять стиль каждой кнопки снова и снова, просто унифицируйте все сходства внутри правила, ориентированного на класс, и примените различия, используя правило, ориентированное на ID.

Подробнее о 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>

источник

2015-08-31 21:51:41

Да! Идеально подходит для jQuery. – alsuelo

Добро пожаловать! ;) –

-1

Вы должны отредактировать :visited свойство.

:visited CSS-псевдокласс позволяет выбирать только те ссылки, которые были посещены. Этот стиль может быть переопределен любыми другими псевдоклассами, связанными с ссылками, то есть :link, :hover и :active, появляющимися в последующих правилах. Чтобы правильно подобрать ссылки, вам необходимо установить правило :visited после правила :link, но перед другими, определенными в LVHA-порядке: :link - :visited - :hover - :active.

Источник: https://developer.mozilla.org/en-US/docs/Web/CSS/%3Avisited

источник

2015-08-31 21:05:05 Onilol

Я цитирую: «Но когда я нажимаю один ссылок на боковой панели удалите стиль в предыдущей ссылке, выбранной на боковой панели. " Это означает, что ваш ответ недействителен. –

Во-первых, я хотел бы отметить, что в действительный HTML атрибут ID должен быть уникальным на одной странице. Из-за этого я рекомендую изменить id="tcolor" на class="tcolor". Вы можете ссылаться на атрибут класса в своем css с периодом (.class) вместо знака числа (#id). Вы также можете иметь несколько атрибутов класса для одного элемента, разделив их имена на пробел (class="class1 class2").

Теперь на ваш фактический вопрос:

Я не думаю, что вы хотите сделать, это возможно без какого-либо JavaScript. В приведенном ниже примере используется номер jQuery library. Это можно сделать без этой библиотеки, но она очень распространена и делает так много кросс-браузера, что я рекомендую.

С нижеследующим решением у меня также создается впечатление, что вам может понадобиться привлекательный стиль для :hover, чем .selected, поэтому вы можете рассказать им обособленно, но это выбор дизайна.

// 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'); 
 
    }); 
 
});

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

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

Теперь, я заметил, что ваши <li> метки имеют ширину 100%, поэтому щелкнув в любом месте справа от них запускает обработчик события, но это может быть исправлено позиционирование вашего <ul>, чтобы заняться только желаемым пространством.

источник

2015-08-31 23:06:27 Somna

Сохраняйте стиль наведения при нажатии ссылки

ответ

Смежные вопросы