Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.11.2018, 12:29
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 27

Mouseover и Mouseout
Здравствуйте! Не судите строго. Сделал примитивно, чтобы при наведении на элемент менялась картинка, как сделать чтобы не прописывать onmouseover и onmouseout в самом теге, а прописать функцию. Подскажите, пожалуйста
<li class="item-slider-item" onmouseover="document.getElementById('1').src='/2.jpg'" onmouseout="document.getElementById('1').src='/1.jpg'"></li>
<img id="1" src="/1.jpg"/>
<li class="item-slider-item" onmouseover="document.getElementById('2').src='/4.jpg'" onmouseout="document.getElementById('2').src='/3.jpg'"></li>
<img id="2" src="/3.jpg" />
Ответить с цитированием
  #2 (permalink)  
Старый 15.11.2018, 13:32
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

var li = document.querySelectorAll('li');
		li[0].onmouseover = e => document.getElementById('1').src='/2.jpg';
		li[0].onmouseout = e => document.getElementById('1').src='/1.jpg';
		li[1].onmouseover = e => document.getElementById('2').src='/4.jpg';
		li[1].onmouseout = e => document.getElementById('2').src='/3.jpg';


данную конструкцию можно будет сократить
Ответить с цитированием
  #3 (permalink)  
Старый 15.11.2018, 13:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

Андрей812,
:hover
Ответить с цитированием
  #4 (permalink)  
Старый 15.11.2018, 15:02
Интересующийся
Отправить личное сообщение для Андрей812 Посмотреть профиль Найти все сообщения от Андрей812
 
Регистрация: 10.09.2018
Сообщений: 27

Спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 15.11.2018, 15:38
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

С hover у меня как-то так получилось... Неизящно.
<style>
li.item-slider-item:nth-child(1):after{ content:url(https://javascript.ru/cat/list/donkey.gif)}
li.item-slider-item:nth-child(1):hover:after{ content:url(https://javascript.ru/cat/list/firefox.gif)}
li.item-slider-item:nth-child(2):after{ content:url(https://javascript.ru/cat/list/jquery_54.png)}
li.item-slider-item:nth-child(2):hover:after{ content:url(https://javascript.ru/cat/list/js.gif)}
</style>
<li class="item-slider-item"></li>
<li class="item-slider-item"></li>
Ответить с цитированием
  #6 (permalink)  
Старый 15.11.2018, 16:02
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

вот так, похоже, лучше.
<style>
</style>
<li class="item-slider-item"></li>
<li class="item-slider-item"></li>
<script>
var styles = '',
images = [['https://javascript.ru/cat/list/donkey.gif','https://javascript.ru/cat/list/firefox.gif'],['https://javascript.ru/cat/list/jquery_54.png','https://javascript.ru/cat/list/js.gif']];
for (var i = 0; i < 2; i++) {
  styles += 'li.item-slider-item:nth-child(' + (i+1) + '):after{ content:url(' + images[i][0] + ')}';
  styles += 'li.item-slider-item:nth-child(' + (i+1) + '):hover:after{ content:url(' + images[i][1] + ')}';
}
document .querySelector('style').innerHTML = styles;
</script>
Ответить с цитированием
  #7 (permalink)  
Старый 15.11.2018, 16:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105


<style>
li.item-slider-item{
    width: 128px;
    height: 128px;
    background-size:  cover;
    background-repeat: no-repeat;
    list-style: none;
    transition: .4s;
     }

li.item-slider-item:nth-child(1){ background-image:url(https://javascript.ru/cat/list/donkey.gif)}
li.item-slider-item:nth-child(1):hover{ background-image:url(https://javascript.ru/cat/list/firefox.gif)}
li.item-slider-item:nth-child(2){ background-image:url(https://javascript.ru/cat/list/jquery_54.png)}
li.item-slider-item:nth-child(2):hover{ background-image:url(https://javascript.ru/cat/list/js.gif)}
</style>
<ul>
<li class="item-slider-item"></li>
<li class="item-slider-item"></li>
</ul>
Ответить с цитированием
  #8 (permalink)  
Старый 15.11.2018, 16:19
Аватар для SuperZen
Профессор
Отправить личное сообщение для SuperZen Посмотреть профиль Найти все сообщения от SuperZen
 
Регистрация: 08.11.2017
Сообщений: 642

мои 5 копеек )
<style>
  /* debug purpose */
  .item-slider-item {
    width: 30px;
    height: 30px;
    border: 1px solid #000;
  }
</style>
<li class="item-slider-item" data-destination="1" data-mouseover="/2.jpg" data-mouseout="/1.jpg"></li>
<img id="1" src="/1.jpg" />
<li class="item-slider-item" data-destination="2" data-mouseover="/4.jpg" data-mouseout="/3.jpg"></li>
<img id="2" src="/3.jpg" />
<script>
  document.querySelectorAll('.item-slider-item').forEach(item => {
    item.addEventListener('mouseover', function (e) {
      document.getElementById(e.target.dataset.destination).src = e.target.dataset.mouseover
    })
    item.addEventListener('mouseout', function (e) {
      document.getElementById(e.target.dataset.destination).src = e.target.dataset.mouseout
    })
  })
</script>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
mouseover, mouseout - не распространяется на дочерние элементы barmaley Events/DOM/Window 31 01.06.2017 08:52
class для mouseover neitherknows jQuery 4 03.03.2017 06:37
Плавно появляющиеся и исчезающие элементы по событиям mouseover и mouseout onepoint Элементы интерфейса 0 04.08.2015 16:42
Сбрасывание события mouseover Worka Events/DOM/Window 3 12.03.2012 03:03
определение времени при событии mouseOver greenred Events/DOM/Window 1 13.02.2012 23:28