0

Можно ли менять стили тега <img> при наведении курсора на блок <div>? Допустим, если я наведу мышь на блок, то ширина изображения изменится с 200px до 400px. Эти элементы не вложенные и находятся в разных местах, но нужно, чтобы они были связаны. Как такое можно реализовать?

img {
  width: 200px;
}

div {
  width: 70px;
  border: 1px solid red;
  text-align: center;
}

div:hover {
  border: 1px solid green;
}
<img src='link.png'>
<div>Клик!</div>

6
  • Ты понимаешь, что ответ на твой вопрос: да, можно. Если есть что-то конкретное, то сразу пиши. Что же вы за любители такие, нравится когда клещами из вас тянешь всё по кусочку. Тренинг шпионов что ли 21 авг 2017 в 20:46
  • @АлексейШиманский, приложил пример, но вообще меня интересовала сама технология, как можно влиять на стили другого элемента.
    – NTP
    21 авг 2017 в 20:51
  • Ну например, в данном случае, через изменения соседа слева (prev) - если через js . еще через соседа справа, через общего предка, через связку идентификатор-класс. да любая технология. их десятки, всё зависит от ситуации.... интересует что: js или css? 21 авг 2017 в 20:54
  • @АлексейШиманский, желательно CSS, но поскольку я не знал, возможно ли такое, приложил еще и JS
    – NTP
    21 авг 2017 в 20:56
  • в данном конкретном случае через чистый css нельзя. можно через препроцессоры разве что (хотя я немного сомневаюсь). в данном случае только через js и например previousSibling (developer.mozilla.org/ru/docs/Web/API/Node/previousSibling) 21 авг 2017 в 20:57

1 ответ 1

2

Решение на javascript:

var div = document.querySelector('div');
var img = document.querySelector('img');

div.onmouseover = function(e) {
  img.style.width = '400px';
};

div.onmouseout = function(e) {
  img.style.width = '';
};
img {
  width: 200px;
}

div {
  width: 70px;
  border: 1px solid red;
  text-align: center;
}

div:hover {
  border: 1px solid green;
}
<div>Текст</div>
<img src="https://www.google.com.ua/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="">


Решение на jQuery:

jQuery(document).ready(function($) {
  $('div').hover(function() {
    // навели мышь на элемент
    $('img').css('width', '400px');
  }, function() {
    // убрали мышь с элемента
    $('img').css('width', '');
  });
});
img {
  width: 200px;
}

div {
  width: 70px;
  border: 1px solid red;
  text-align: center;
}

div:hover {
  border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Текст</div>
<img src="https://www.google.com.ua/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="">

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.