Havolani ajratish paytida divning rangi o'zgaradi

Shunday qilib, menda bir nechta maqola yorlig'i bor, har birining aloqasi bor, bu esa ushbu maqola ichidagi tasvirni o'z ichiga olgan divning fonini o'zgartirishi kerak. Menga havola faqatgina boshqa maqolalarga ta'sir qiladigan maqolaga murojaat qilishini xohlayman. Quyidagi kod boshqa maqolalarning divlarini ham maqsad qilib olgan ko'rinadi. Iltimos, kimdir meni to'g'ri yo'nalishda ko'rsatishi mumkinmi? Ko'p rahmat

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(".edgtf-pli-link").on("hover", function() {
  $(".edgtf-pli-image").css("background", "red");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edgtf-pl-item-inner"> <div class="edgtf-pli-image"> </div> <div class="edgtf-pli-text-holder"> <div class="edgtf-pli-text-wrapper"> <div class="edgtf-pli-text">

Garden

</div> </div> </div> </div>
 

<div class="edgtf-pl-item-inner"> <div class="edgtf-pli-image"> </div> <div class="edgtf-pli-text-holder"> <div class="edgtf-pli-text-wrapper"> <div class="edgtf-pli-text">

Wall

</div> </div> </div> </div>
 
</div> </div>

1
Gorizontal scrollbarsni olib tashlashni xohlaysizmi? Bu o'qiydiganlikni oshiradi.
qo'shib qo'ydi muallif reporter, manba
uning o'rniga $ (this) .find ('. edgtf-pli-image'). CSS ("fon", "qizil");
qo'shib qo'ydi muallif Toxide82, manba

7 javoblar

Bunga o'xshash biror narsa qilish kerak

$(".edgtf-pli-link").on("hover", function() {
   $(this).closest('.edgtf-pl-item-inner').find('.edgtf-pli-image').css('background', 'red');
});
2
qo'shib qo'ydi

Joriy kodlangan elementni olish uchun $ ('...') funktsiyasini bajaring (function {$ (this)}

$('.edgtf-pli-link').hover(function() {
  $(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'red')
}, function() {
  $(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'none')
})

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$('.edgtf-pli-link').hover(function() {
  $(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'red')
}, function() {
  $(this).closest('.edgtf-pl-item').find('.edgtf-pli-image').css('background', 'none')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edgtf-pl-item-inner"> <div class="edgtf-pli-image"> </div> <div class="edgtf-pli-text-holder"> <div class="edgtf-pli-text-wrapper"> <div class="edgtf-pli-text">

Garden

</div> </div> </div> </div>
 

<div class="edgtf-pl-item-inner"> <div class="edgtf-pli-image"> </div> <div class="edgtf-pli-text-holder"> <div class="edgtf-pli-text-wrapper"> <div class="edgtf-pli-text">

Wall

</div> </div> </div> </div>
 
</div> </div>

0
qo'shib qo'ydi

Rasmni havola elementining pastki qismidan topasiz<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

$(".edgtf-pli-link").hover(function() {
    $(this).parent().find(".edgtf-pli-image").css("background", "red");
  },
  function(e) {
     $(this).parent().find(".edgtf-pli-image").css("background", "");
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="edgtf-pl-item-inner"> <div class="edgtf-pli-image"> </div> <div class="edgtf-pli-text-holder"> <div class="edgtf-pli-text-wrapper"> <div class="edgtf-pli-text">

Garden

</div> </div> </div> </div>
 
<div class="edgtf-pl-item-inner"> <div class="edgtf-pli-image"> </div> <div class="edgtf-pli-text-holder"> <div class="edgtf-pli-text-wrapper"> <div class="edgtf-pli-text">

Wall

</div> </div> </div> </div>
 
</div> </div>

0
qo'shib qo'ydi

Bu beacause kabi bir narsa qilishni juda yaxshi va JS orqali hardcoding uslubi o'rniga, stylingni CSS fayliga o'tkazishga tavsiya etilgan.

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

    $('.box1').hover(
       function(){
          $(this).addClass('onOver');
       }, 
       function(){
          $(this).removeClass('onOver');
    });
.onOver{
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Box1
</div> </div>

Shunday qilib, bu siz asosan "havoga ko'tarilgan" klassni harakatlanayotgan elementga o'zgartiradi, shuning uchun faqatgina CSS fayliga moslashtirilgan sinfni o'zgartirishingiz mumkin. Hurmat bilan va baxtli kodlash!

0
qo'shib qo'ydi

Orqa fon rangini o'zgartirish uchun CSS-ni hover xususiyatidan foydalanishingiz juda oddiy.

.edgtf-pli-link:hover {
background: green;
}

It'd work, If this doesn't work its possible some other class over-riding hover background property. Then do !important

 .edgtf-pli-link:hover {
   background: green !important;
}

Bu, albatta, ishlaydi.

0
qo'shib qo'ydi

CSS

.changeColor{
background-color:red;
}

js

jQuery(function() {
            jQuery(".edgtf-pli-link").hover(function() {
            jQuery('.edgtf-pli-image', this).addClass("changeColor");
          }, function() {
            jQuery('.edgtf-pli-image', this).removeClass("changeColor");
          });
        });
0
qo'shib qo'ydi

siz tasvirni ajratib ko'rsatishingiz mumkin va "div" ni alohida divga fon rangi qo'shish uchun ishlatishingiz mumkin.

$(".edgtf-pli-image").on("hover", function() {
      $(this).css("background", "red");
    })
0
qo'shib qo'ydi
Javascript UZB
Javascript UZB
99 ishtirokchilar

@js_uzb @vuejs_uz @react_uz @nodejs_uz @angular_uz @ngTashkent @yiiframework_uz @laravel_uz @linux_uzbek @python_uz @swift_uzb —————— @uzdevgroup @UzGeeksGroup ——— @UzDev_Jobs @jobs_uzb