在悬停时加载一个 CSS 类答案

【问题标题】：Load a css class on hover在悬停时加载一个 CSS 类
【发布时间】：2017-03-17 13:32:08
【问题描述】：

我有一个 div，当我悬停该 div 时，我想调用另一个 css 类。我已经使用了一些我找到的方法，但我无法让它发挥作用。

html代码

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

所以当我悬停trait_box 类时，我想加载block__body 类。我该怎么做？

我尝试了以下方法，但没有成功，并在红线中显示了一些错误。

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

}

【问题讨论】：

类属性写为<div class="className">。你需要在哪里使用class属性作为className？？
在 reactjs 中你必须把它作为 className
谢谢，我完全不知道。

标签： javascript html css reactjs

【解决方案1】：

您的样式表代码看起来像 SCSS，需要将其编译为 CSS 才能获得您想要的效果。下面是一个使用纯 HTML 和 CSS 以及占位符图像的示例。

注意：我完全不熟悉 React。据我所知，className 将呈现为class 属性，img 源{Honesty} 将被转换为字符串。

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

【讨论】：

【解决方案2】：

我不确定你所说的“加载”类是什么意思。通常这意味着您希望将类添加到元素中。我认为你的意思是当.trait_box 悬停时你想选择.block__body。由于嵌套样式，我还假设您正在使用 SCSS。这是给读者的重要信息。我会在 vanilla CSS 中给你答案，因为问题很可能是你不使用 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>

【讨论】：

【解决方案3】：

使用 onMouseEnter 和 onMouseLeave 以纯反应方式处理悬停

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

【讨论】：

【解决方案4】：

如果您对代码进行一些修改，它会是这样的。

我的理解是，当您的父 div 为 hovered 时，您想显示标题。这简直是可能的。您无需添加新的class，只需添加一些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>

【讨论】：

【解决方案5】：

您需要通过以下方式使用 jQuery 或 Javascript：

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

【讨论】：

【解决方案6】：

你可以像下面这样使用jQuery

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

或者像这样

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

【讨论】：