У меня сложная проблема с простым эффектом наведения. У меня есть определенные изображения (круглой формы, типа .png, прозрачный фон) - и когда пользователь наводит курсор на любое изображение, его цвет должен измениться (в этом случае я скрываю текущее изображение и отображаю его дубликат другого цвета , используя jquery .on (hover)).
Тем не менее, эффект наведения действует забавно: иногда отстает (занимает несколько секунд, прежде чем снимается / или когда изображение приближается из определенного угла hover работает, но при подходе от другого это не так. У меня нет задержек при переходе.
Вы можете увидеть это здесь: / url удален /
Вы заметите, что один Изображение, самое маленькое с лампой внутри, работает особенно медленно / проблематично c.
Поэтому мне было интересно, есть ли способ проверить «пиксели» моей веб-страницы, которые вызывают наведение при наведении если это вызвано типом изображения / положением / et c ... Еще я подозреваю, что масштабирование влияет на зависание (у меня весь контейнер уменьшен до 0. С 8 по css).
Любая помощь очень ценится.
Если необходимо, вот html:
<div class="container-wrapper">
<div class="our-values-container">
<img src="/wp-content/uploads/2020/01/black-circle1.png" class="vimg1 hideblack">
<img src="/wp-content/uploads/2020/01/grey-circle2.png" class="vimg2 grey">
<img src="/wp-content/uploads/2020/01/grey-circle3.png" class="vimg3 grey">
<img src="/wp-content/uploads/2020/01/grey-circle4.png" class="vimg4 grey">
<img src="/wp-content/uploads/2020/01/grey-circle5.png" class="vimg5 grey">
<img src="/wp-content/uploads/2020/01/grey-circle6.png" class="vimg6 grey">
<!------------------------------------------->
<img src="/wp-content/uploads/2020/01/grey-circle1.png" class="vimg1 grey">
<img src="/wp-content/uploads/2020/01/black-circle2.png" class="vimg2 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle3.png" class="vimg3 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle4.png" class="vimg4 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle5.png" class="vimg5 hideblack">
<img src="/wp-content/uploads/2020/01/black-circle6.png" class="vimg6 hideblack">
<!-------------------------------------------->
<img src="/wp-content/uploads/2020/01/text-box1.png" class="txt1 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box2-grey.png" class="txt2 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box3-real-grey.png" class="txt3 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box3-grey.png" class="txt4 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box5-grey.png" class="txt5 txtgrey">
<img src="/wp-content/uploads/2020/01/text-box6-grey.png" class="txt6 txtgrey">
</div>
</div>
Вот основная часть css:
.our-values-container img{
position: absolute;
}
img.vimg1{
top: 150px;
left: -12px;
height: 123px;
}
img.vimg2{
top: 225px;
left: 97px;
height: 130px;
}
//the rest of the images are position in a similar manner
img.txtgrey{
height: 280px;
}
img.hideblack{
display: none;
}
img.grey.vimg1{
display: none;
}
img.hideblack.vimg1{
display: block;
}
.container-wrapper{
transform: scale(0.8, 0.8); //the initial size was slightly bigger than needed
//and I realized this after I positioned everything, so I resolved to
//scale it down.
}
Функция javascript:
function ourValues_page() {
if ($(window).width() > 960) {
$(".vimg1.grey").hover(function () {
makeAllGrey2();
$(".vimg1.grey").hide();
$(".vimg1.hideblack").show();
$(".txt1").attr("src", "/wp-content/uploads/2020/01/text-box1.png");
}, function () {});
$(".vimg2.grey").hover(function () {
makeAllGrey2();
$(".vimg2.grey").hide();
$(".vimg2.hideblack").show();
$(".txt2").attr("src", "/wp-content/uploads/2020/01/text-box2.png");
}, function () {
});
$(".vimg3.grey").hover(function () {
makeAllGrey2();
$(".vimg3.grey").hide();
$(".vimg3.hideblack").show();
$(".txt3").attr("src", "/wp-content/uploads/2020/01/text-box3-real.png");
}, function () {});
$(".vimg4.grey").hover(function () {
makeAllGrey2();
$(".vimg4.grey").hide();
$(".vimg4.hideblack").show();
$(".txt4").attr("src", "/wp-content/uploads/2020/01/text-box3.png");
}, function () {});
$(".vimg5.grey").hover(function () {
makeAllGrey2();
$(".vimg5.grey").hide();
$(".vimg5.hideblack").show();
$(".txt5").attr("src", "/wp-content/uploads/2020/01/text-box5.png");
}, function () {});
$(".vimg6.grey").hover(function () {
makeAllGrey2();
$(".vimg6.grey").hide();
$(".vimg6.hideblack").show();
$(".txt6").attr("src", "/wp-content/uploads/2020/01/text-box6.png");
}, function () {
});
}
function makeAllGrey2() {
$(".our-values-page .hideblack").hide();
$(".our-values-page .grey").show();
$(".txt1.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box1-grey.png");
$(".txt2.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box2-grey.png");
$(".txt3.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box3-real-grey.png");
$(".txt4.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box3-grey.png");
$(".txt5.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box5-grey.png");
$(".txt6.txtgrey").attr("src", "/wp-content/uploads/2020/01/text-box6-grey.png");
}
}