Добрый день! Столкнулся с такой проблемой что не могу до конца понять как сделать так чтобы при наведении на ссылку одна из картинок на сайте стала почти прозрачная а вторая наоборот стала видна.
3 ответа
например, варианты с анимацией прозрачности, либо с 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"/>
Если разметка позволяет, такое делается через 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">
button.onmouseenter = function(){
firstImg.style.opacity = '0';
secondImg.style.opacity = '1';
}
button.onmouseleave = function(){
firstImg.style.opacity = '1';
secondImg.style.opacity = '0';
}
-
перепрочитайте вопрос повнимательнее, пожалуйста, и создайте воспроизводимый пример, пока -1– meineCommented 20 нояб. 2019 в 19:06