Вот кодКак изменить цвет ссылки при наведении на другую ссылку?
<a id="link1" href="#" >About</a>
<a id="link2" href="#">Contact us</a>
Я хочу, чтобы цвет в LINK1 для быть изменен при link2 наведен. Возможно ли с помощью css ?.
Поскольку CSS не кажется, чтобы быть в состоянии справиться с этим, попробуйте JavaScript
window.onload=function() {
document.getElementById("link2").onmouseover=function() {
document.getElementById("link1").style.color="red";
}
document.getElementById("link2").onmouseout=function() {
document.getElementById("link1").style.color="blue";
}
}<a id="link1" href="#" >About</a>
<a id="link2" href="#">Contact us</a>Или с помощью братьев и сестер
function prevSib(elem) {do { elem = elem.previousSibling;} while (elem && elem.nodeType !== 1); return elem; }
window.onload=function() {
document.getElementById("link2").onmouseover=function() {
prevSib(this).style.color="red";
}
document.getElementById("link2").onmouseout=function() {
prevSib(this).style.color="blue";
}
}<a id="link1" href="#" >About</a>
<a id="link2" href="#">Contact us</a>Это сработало спасибо –
, вы должны принять как ответ, если он решил вашу проблему. – ketan
Используя чистый css, невозможно вернуться назад. Вы можете идти каскадно.
Но вы можете сделать это с помощью JQuery. как:
$(document).ready(function(){
$(".link2").mouseover(function(){
$(".link1").css("color", "red");
});
$(".link2").mouseout(function(){
$(".link1").css("color", "black");
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" class="link1" href="#" >About</a>
<a id="link2" class="link2" href="#">Contact us</a>Надеется, что это помогает.
CSS не может выбрать предыдущих братьев и сестер. Вы можете использовать JavaScript:
var links = [].slice.call(document.querySelectorAll('.menu_item'));
function hover(event) {
var pre = this.previousElementSibling,
method = event.type === 'mouseenter' ? 'add' : 'remove';
if (pre) {
pre.classList[method]('active');
}
}
links.forEach(function(el) {
el.addEventListener('mouseenter', hover);
el.addEventListener('mouseleave', hover);
});
Приведенный выше код предполагает, что a элементы имеют класс menu_item и класс active должны быть добавлены к предыдущему собрата из наведен элемента.
Does previousElementSibling возвращает текстовый узел для пробелов между ссылками? Кроме того, классList является совершенно новым и не поддерживается в нескольких браузерах. Ваш ответ кажется излишним сложным для того, что он должен достичь. – mplungjan
@mplungjan Нет, это не так. Это относится к предыдущему брату из HTMLElement. Это то, что делает свойство 'previousSibling'. Что касается 'classList', многие браузеры поддерживают API, и вы также можете [подгонять его] (https://developer.mozilla.org/en-US/docs/Web/API/Element/classList). – undefined
Используйте этот код для JavaScript (link1 цвет меняется, если link2 зависает). Вам нужно использовать атрибуты тегов html, такие как onmouseover и onmouseout.
Попробуйте этот код. Для изменения цвета link1, когда виден link2.
<html>
<head>
<script>
function colorchange(){
document.getElementById("link1").style.color="red";
}
function colorchange2(){
document.getElementById("link1").style.color="blue";
}
</script>
</head>
<body>
<a id="link1" href="#" >About</a>
<a id="link2" onmouseover="colorchange()" onmouseout="colorchange2()" href="#">Contact us</a>
</body>
</html>
Я полагаю, что это то, что вы ищете.
Сначала вам нужно обернуть ваши ссылки внутри контейнера, как этот
<div class='container'>
<a id="link1" href="#" >About</a>
<a id="link2" href="#">Contact us</a>
</div>
, а затем применить эти стили
.container:hover a:not(:hover){
color:red;
}
css only demo here
UPDATE
Как я уже говорил, может комментарий ниже я должен вы хотели изменить стиль всех незакрепленных ссылок, однако, если вы хотите изменить только ссылку1, когда link2 зависает, но не меняет стиль ссылки2, когда link1 является ho VERED вы могли бы написать вам Css как этот
second demo
.container:hover a:first-child:not(:hover){
color:red;
}
Интересно, однако, он также имеет цвет link2, когда link1 зависнет – mplungjan
Я думал, что у него есть набор ссылок и он хочет изменить стиль всех незакрепленных ссылок, так или иначе, только для двух ссылок, не меняя стиль второго, когда сначала зависает, js - единственное решение. –
Что вы пробовали? – adricadar
Нет, невозможно. CSS не может вернуться назад. – undefined
поэтому любой скрипт для этого –