0

Добрый день! Столкнулся с такой проблемой что не могу до конца понять как сделать так чтобы при наведении на ссылку одна из картинок на сайте стала почти прозрачная а вторая наоборот стала видна.

3 ответа 3

2

например, варианты с анимацией прозрачности, либо с css анимацией.

$("a").hover(function(){

   $("#jerry").animate({'opacity': 1});
   $("#tom").addClass("transparent");
   
}, function(){
   $("#jerry").animate({'opacity': 0});
   $("#tom").removeClass("transparent");
});
img { max-height: 100px; }
#jerry {
   opacity: 0;
}
#tom {
   opacity: 1;
   transition: opacity 1s ease;
}
#tom.transparent {
   opacity: 0.1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div><a href="#">link</a></div>

<img id="jerry" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTB54qstpL8gc5p-6Y10iL9YBj-ecj3oB1ML0BsXzd-EBoVvF8H&s"/>
<img id="tom" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSOfHS1vk0GgI2ykIK7NbKn4DtZXdeppGKfDJG6wvyM5Gjc7OqZ_w&s"/>

0

Если разметка позволяет, такое делается через CSS:

.invis { opacity: 0; }

.invis, .visi { transition: 0.7s; }

.bubu:hover ~ .visi { opacity: 0.2; }
.bubu:hover ~ .invis { opacity: 1; }
<a href="#" class="bubu">Какая-то ссылка</a>
<br><br>
<img class="invis" src="https://gyazo.com/f850be7e9fc91aa2c8cb844603ea1e10.png">
<img class="visi" src="https://gyazo.com/c708f879e56f725318fafca74b9cbe7f.png">

Более универсальный фрагмент на JS:

let bubu = document.querySelectorAll('.bubu');
let invis = document.querySelectorAll('.invis');
let visi = document.querySelectorAll('.visi');

for( let i = 0; i < bubu.length; i++ ){
  bubu[i].addEventListener('mouseenter', function(){
    invis[i].classList.remove('opa-0');
    visi[i].classList.add('opa-02');
  });
  
  bubu[i].addEventListener('mouseleave', function(){
    invis[i].classList.add('opa-0');
    visi[i].classList.remove('opa-02');
  });
}
img { width: 80px; height: 80px; }
.invis, .visi { transition: 0.7s; }

.opa-0 { opacity: 0; }
.opa-02 { opacity: 0.2; }
<a href="#" class="bubu">Какая-то ссылка</a>
<hr>
<img class="invis opa-0" src="https://gyazo.com/f850be7e9fc91aa2c8cb844603ea1e10.png">
<img class="visi" src="https://gyazo.com/c708f879e56f725318fafca74b9cbe7f.png">

<hr>

<a href="#" class="bubu">Какая-то ссылка</a>
<hr>
<img class="invis opa-0" src="https://gyazo.com/f850be7e9fc91aa2c8cb844603ea1e10.png">
<img class="visi" src="https://gyazo.com/c708f879e56f725318fafca74b9cbe7f.png">

-1

button.onmouseenter = function(){
  firstImg.style.opacity = '0';
  secondImg.style.opacity = '1';
}
button.onmouseleave = function(){
  firstImg.style.opacity = '1';
  secondImg.style.opacity = '0';
}

1
  • перепрочитайте вопрос повнимательнее, пожалуйста, и создайте воспроизводимый пример, пока -1
    – meine
    Commented 20 нояб. 2019 в 19:06

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