Как заставить различные изображения появляться при наведении на соответствующие слова в списке в Javascript и / или CSS? - PullRequest
Новая
       7

Как заставить различные изображения появляться при наведении на соответствующие слова в списке в Javascript и / или CSS?

0 голосов
/ 25 апреля 2019

У меня есть список «серий», и я хочу, чтобы изображение, связанное с указанной серией, всплывало, когда пользователь наводит курсор на имя серии в списке. Я также хочу, чтобы он всплывал с transition из .5s.

Я столкнулся с проблемой 22, где, если я использую эффект наведения в CSS и перехожу с display: none; -> display: block;, я не могу анимировать, но если я делаю это с opacity: 0; -> opacity: 1; изображения должны быть дочерними элементами, и когда пользователь наводит курсор на свое абсолютное местоположение, они также появляются, тогда как я хочу, чтобы они появлялись только при наведении курсора на соответствующее слово.

Каждое найденное мной решение касалось использования одного из этих двух методов или относится только к одному изображению, появляющемуся при наведении курсора на весь раздел, поэтому я ищу решение в Javascript. 

li img {
    opacity: 0;
    transition: opacity 0.5s;
    display: none;
}

a.s1:hover img {
    opacity: 1; 
    display: block;
}

a.s2:hover img {
    opacity: 1;
    display: block;
}
<a href="series-1.html" class="s1">Series 1
    <div class="images">
    <div class="image1">
        <img src="image1.jpg">
    </div>
    <div class="image2">
        <img src="image2.jpg">
    </div>
    </div>
</a>

<a href="series-2.html" class="s2">Series 2
    <div class="images">
    <div class="image1">
        <img src="bowl.jpg">
    </div>
    <div class="image2">
        <img src="octupus.jpg">
    </div>
    </div>
</a>

1 Ответ

0 голосов
/ 25 апреля 2019

Может быть, это решение поможет вам:

Примечание. При создании анимации с использованием CSS не используйте свойство display для скрытия элементов. 

<a href="series-1.html" class="s1">
  <p>Series 1</p>
  <img src="https://i.ytimg.com/vi/QYQ0I1mvFDE/maxresdefault.jpg">
  <img src="https://i.ytimg.com/vi/QYQ0I1mvFDE/maxresdefault.jpg">
</a>

<a href="series-2.html" class="s1">
  <p>Series 2</p>
  <img src="https://i.ytimg.com/vi/QYQ0I1mvFDE/maxresdefault.jpg">
  <img src="https://i.ytimg.com/vi/QYQ0I1mvFDE/maxresdefault.jpg">
</a>

img {
  opacity: 0;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  width: 10%;
  margin:2px;
}

a.s1 {
  height: 10px; 
  display:block;
}

a.s1:hover {
  height: auto; 
}
a.s1:hover img {
  opacity: 1; 
}

Демонстрация: https://codepen.io/anon/pen/LvMxWm

...