Как средствами CSS сделать так, чтобы при наведении мыши на один элемент изменялось свойство другого элемента? Если возможно, желательно CSS, если нет -- то на JS.
-
На JS работает только с id ? Если да, то такой вариант не катит, т.к работает только с одним элементом списка. – user183274 11 июн '15 в 13:17
5 ответов
<script>
function smena()
{
var elem.document.getElementById("tag");
elem.setAttribute("id", "tag2"); //сменить атрибут
elem.firstChild.nodeValue="другой текст";
}
</script>
<h1 onClick="smena()">Изменить</h1>
<p id="tag">текст</p>
Можно и через CSS3.
Используя терминологию предыдущего ответа, код будет примерно таким:
ЦЕЛЬ:hover ~ ЖЕРТВА {
-moz-transition: all 0.5s 0.3s ease-in;
-o-transition: all 0.5s 0.3s ease-in;
-webkit-transition: all 0.5s 0.3s ease-in;
background-color: rgba(0,0,0,0.3);
z-index: 2106;
}
В фигурных скобках прописываем параметры анимации изменения и изменяемые свойства. Есть только два условия, при которых этот способ будет работать:
- ЦЕЛЬ и ЖЕРТВА должны быть братьями (то есть иметь общий родительский элемент).
- ЖЕРТВА в коде должна быть ниже ЦЕЛИ.
<script>
ЦЕЛЬ.onmouseover = function(){ЖЕРТВА.style.СВОЙСТВО='РЕЗУЛЬТАТ'};
ЦЕЛЬ.onmouseout = function(){ЖЕРТВА.style.СВОЙСТВО=''};
</script>
Через CSS нельзя. А в скрипте - первая строчка - присваивает свойство при наведении, вторая - возвращает как было, потому кавычки должны остаться пустыми. Вместо "ЦЕЛЬ" подставь id элемента, на который наводишь мышь, вместо "ЖЕРТВА" - id того, который должен измениться.
Если CSS-свойство состоит из одного слова, так его и дописываешь вместо "СВОЙСТВО".
Если из двух, например background-color, vertical-align
, то меняешь на формат
backgroundColor
verticalAlign
То есть, первое слово без изменений, тире убираешь и первую букву второго слова пишешь в верхнем регистре. Если слов больше - так же поступаешь с продолжением. вот пример:
<input type='button' value='у меня id=one' id='one'/>
<input type='button' value='а у меня id=two' id='two'/>
<script>
one.onmouseover = function(){two.style.backgroundColor = 'blue'};
one.onmouseout = function(){two.style.backgroundColor = ''};
</script>
-
В CSS есть селектор
~
для выбора сестринских элементов, так что вы заблуждаетесь относительно невозможности реализации данного функционала средствами CSS. Посмотрите на ответ пользователя @TheDoctor – VenZell 4 апр '15 в 5:19
Как средствами CSS сделать так, чтобы при наведении мыши на один элемент изменялось свойство другого элемента?
Это возможно для некоторых частных случаев:
1. Вложенный элемент:
.smth:hover .dest {}
2. Непосредственно следующий или один из следующих элементов:
.smth:hover + .dest {}
.smth:hover ~ .dest {}
3. Внутри следующего или одного из следующих
.smth:hover + .smth-else .dest {}
.smth:hover ~ .smth-else .dest {}
В остальных случаях вроде нельзя. Стоит попробовать привести разметку к одному из перечисленных вариантов и воспользоваться соответствующим кодом.
Вот если бы требование было на клик, а не на наведение, то можно было бы чекбоксы в корень бросить и воспользоваться лейблами.
Сам не профи, но думается мне можно, если есть вложенность, как то так:
<div id="a">
<p>Меняюсь</p>
</div>
#a:hover p{
font-size: 100px;
}
-
-
-
если что то добавьте в <p id="b"> и проверьте <script> document.getElementById('a').onmouseover = fun; function fun(){ document.getElementById('b').style.backgroundColor="red"; } </script> – LeshaZ 31 мар '14 в 13:36