Load a css class on hover

Question

I have a div and when i hover that div i want to call another css class. I have used some ways i've found but i cannot get it to work.

html code

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

           <div className="trait_img_div">
                <img src={Honesty} className="trait_img"/>
           </div>

           <div className="block__body">
                <h3>Card Title</h3>
           </div>
       </div>

SO when i hover trait_box class i want to load block__body class. How can i do it?

I've tried the following way but did not work and it showed some errors in red lines.

.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; }
}

}

Class attribute is written as <div class="className">. Where do you need to use class attribute as className ?? — Deepak Yadav
– Deepak Yadav, Commented Mar 17, 2017 at 5:30

bags · Accepted Answer · 2017-03-17 05:11:21Z

Your stylesheet code looks like SCSS that will need to be compiled to CSS to have the effect you want. Here is an example below using plain HTML and CSS and a placeholder image.

Note: I am totally unfamiliar with React. From what I gather, className will be rendered as the class attribute, and the img source {Honesty} will be converted to a string.

.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">
                <span className="trait_description">Honesty</span>
           </div>

           <div class="trait_img_div">
                <img src="http://lorempixel.com/400/200/sports/" className="trait_img"/>
           </div>

           <div class="block__body">
                <h3>Card Title</h3>
           </div>
       </div>

l3fty · Accepted Answer · 2017-03-17 05:12:20Z

I am not sure what you mean by "loading" the class. Typically that means you want the class to be added to the element. What I think you mean is you want to select .block__body when .trait_box is hovered. I also assume you're using SCSS because of the nested styles. That's an important piece of information to give readers. I will give you the answer in vanilla CSS as the problem very well might be you are not using SCSS.

    .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>

DroidNoob · Accepted Answer · 2017-03-17 05:22:11Z

Use onMouseEnter and onMouseLeave to handle hover in pure react way

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

       <div className="trait_img_div">
            <img src={Honesty} className="trait_img"/>
       </div>

       <div className="block__body">
            <h3>Card Title</h3>
       </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";
}

Deepak Yadav · Accepted Answer · 2017-03-17 05:32:08Z

If you fix your code somewhat, this is what it would look like.

What I understand is, you want to show captions when your parent div is hovered. That is simply possible. You don't need to add a new class you just need to add some CSS properties.

.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">
    <span class="trait_description">Honesty</span>
  </div>

  <div class="trait_img_div">
    <img src="http://lorempixel.com/output/abstract-q-c-274-234-7.jpg" class="trait_img" />
  </div>

  <div class="block__body">
    <h3>Card Title</h3>
  </div>
</div>

Coder Guy · Accepted Answer · 2017-03-17 05:20:59Z

-1

You would need to use jQuery or Javascript in the following way:

$('.myDiv').hover(function() {
  $(this).addClass('myClass');
});

answered Mar 17, 2017 at 5:20

Coder Guy

971 silver badge9 bronze badges

Comments

slokuliyana · Accepted Answer · 2017-03-17 05:24:03Z

-1

you can use jQuery as below

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

or like this

$(".trait_box").hover(function () {
    $(this).toggleClass("block__body");
 });

answered Mar 17, 2017 at 5:24

slokuliyana

91 silver badge4 bronze badges

Collectives™ on Stack Overflow

Load a css class on hover

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related