Yuzlash uchun CSS classni yuklang

Menda bir div bor va men boshqa bir CSS sinfiga qo'ng'iroq qilishni istayman. Men topgan ba'zi yo'llarni ishlatganman, lekin uni ishlashga qodir emasman.

HTML kodi

     <div className="trait_box polaroid">
           <div className="trait_description_div">
                Honesty
           </div>

           <div className="trait_img_div">
                
           </div>

           <div className="block__body">
                

Card Title

           </div>
       </div>

Ya'ni, block__body sinfini yuklashni istagan trait_box sinfiga o'tishda. Qanday qilaman?

Men quyidagi yo'lni sinab ko'rdim, ammo ishlamadi va qizil chiziqlarda xatolar ko'rsatdi.

.trait_box {

    width: 220px;
    height: 240px;
    display: inline-block;
    background-color: white;
    margin-right: 35px;
    cursor: pointer;

    &:hover .block__body {
    position:absolute;
    top:0;
    background:#2980b9;
    color:#fff;
    height:100%;
    transition: top .5s;

    h3 { color: #fff; }
}

}
3
reaksiyalarda uni sinf nomi sifatida berish kerak
qo'shib qo'ydi muallif CraZyDroiD, manba
Sinf xususiyati <div class = "className"> deb yoziladi. class atributini className sifatida ishlatishingiz kerak?
qo'shib qo'ydi muallif Deepak Yadav, manba
Rahmat, men bundan bexabar edim.
qo'shib qo'ydi muallif Deepak Yadav, manba

6 javoblar

Sizning stile-parolingiz kodi sizga kerakli effekt uchun CSS-da kompilyatsiya qilinishi kerak bo'lgan SCSSga o'xshaydi. Pastdagi HTML va CSS-dan va to'ldiruvchining rasmidan foydalanib, quyidagi misol.

Eslatma: Men React bilan to'liq tanish emasman. Men to'playdigan narsalardan className class xususiyati sifatida taqdim etiladi va img source {honesty}} mag'lubiyatga aylantiriladi.

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

.trait_box {
    width: 220px;
    height: 240px;
    display: inline-block;
    background-color: white;
    margin-right: 35px;
    cursor: pointer;
}

.trait_box:hover .block__body {
    position:absolute;
    top:0;
    background:#2980b9;
    color:#fff;
    height:100%;
    transition: top .5s;
}

.trait_box:hover .block__body h3 {
    color: #fff;
}
<div class="trait_box polaroid">
           <div class="trait_description_div">
                Honesty
           </div>

           <div class="trait_img_div">
                
           </div>

           <div class="block__body">
                

Card Title

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

4
qo'shib qo'ydi

Sinovni "yuklash" orqali nimani nazarda tutganingizga amin emasman. Odatda sinfning elementga qo'shilishini xohlaysiz degan ma'noni anglatadi. .trait_box .block__body ni tanlashni istasangiz, degan fikrda degan ma'noni anglatadi. Bundan tashqari, ichki jadvallar tufayli SCSS dan foydalanmoqchiman. Bu kitobxonlarga beriladigan muhim ma'lumotdir. Javobni vanilla CSS-da sizga yaxshi javob beraman, chunki SCSSni ishlatib emas. .

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

    .trait_box {
      width: 300px;
      height: 300px;
      background: navy;
      margin: 0 auto;
    }
    .block__body {
      width: 150px;
      height: 150px;
      background: skyblue;
      margin: 0 auto;
      transition: background-color 300ms ease;
    }
    .trait_box:hover .block__body {
      background-color: orange;
    }
<div class="trait_box">
  <div class="block__body"></div>
</div>
</div> </div>
2
qo'shib qo'ydi

jQuery'ni quyidagi kabi foydalanishingiz mumkin

$(".trait_box").hover(
  function() {
    $(this).addClass("block__body");
  },
  function() {
    $(this).removeClass("block__body");
  }
);

yoki shunga o'xshash

$(".trait_box").hover(function() {
    $(this).toggleClass("block__body");
 });
1
qo'shib qo'ydi

Quyidagi tarzda jQuery yoki Javascriptdan foydalanish kerak bo'ladi:

$('.myDiv').hover(function() {
  $(this).addClass('myClass');
});
1
qo'shib qo'ydi

Agar siz kodingizni biroz tuzatsangiz, bu xuddi shunday bo'ladi.

Men tushundim, siz ota-bobingiz hovered bo'lganda taglavhalarni ko'rsatishni xohlaysiz. Bu shunchaki mumkin. Yangi class kodini kiritishingiz shart emas. Buning uchun CSS properties ni qo'shish kerak.

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

.trait_box {
  position: relative;
  /* because, absolute needs a relative parent */
  width: 220px;
  height: 240px;
  display: inline-block;
  background-color: white;
  margin-right: 35px;
  cursor: pointer;
}

.trait_box img {
  max-width: 100%;
  /* just to make the demo image fix properly in your given width */
  height: auto;
}

.trait_box:hover .block__body {
  position: absolute;
  top: 0;
  width: 100%;
  /* if you want to cover full parent width */
  background: #2980b9;
  color: #fff;
  height: 100%;
  transition: top .5s;
}

h3 {
  color: #f00;
}
<div class="trait_box polaroid">
  <div class="trait_description_div">
    Honesty
  </div>

  <div class="trait_img_div">
    
  </div>

  <div class="block__body">
    

Card Title

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

0
qo'shib qo'ydi

On-MouseEnter va onMouseLeave-da, tovushni tepki bilan ishlash uchun foydalaning

   <div className={divClassName} 
        onMouseEnter={this.onMouseEnterHandler} 
        onMouseLeave={this.onMouseLeaveHandler}>
       <div className="trait_description_div">
            Honesty
       </div>

       <div className="trait_img_div">
            
       </div>

       <div className="block__body">
            

Card Title

       </div>
   </div>


divClassName="trait_box polaroid";//or save it in a state

onMouseEnterHandler =() ={
    divClassName = divClassName +" block__body"//use setState if its in state
}
onMouseLeaveHandler =() ={
    divClassName = "trait_box polaroid";
}
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

ReactJS & ReactNative Uzbekistan
ReactJS & ReactNative Uzbekistan
81 ishtirokchilar

Guruh ReactJS va ReactNative bo'yicha muloqot qilish uchun ochilgan. Sizni qiziqtirsa: @nodejs_uz @react_uz @angular_uz @ngTashkent @yiiframework_uz @js_uzb @typescript_uzb @vuejs_uz @ngTashkent @laravel_uz @uzdevgroup Ish o'rinlari @UzDev_jobs