Question

这是实时预览：http://cyberview.com.my/tender/tender-listing

在页面上有以下div：

 <div class="tiles--medium-bottom">
       <img src="http://cyberview.com.my/images/default-source/default-album/15faf31fa9819a64c5aa74ff000073ca3c.jpg?sfvrsn=0" alt="Interior Design" title="Interior Design">
          <div class="tiles__content">
               <span class="label">Interior Design</span>
               <span class="tiles__headline">Tender ID: CYBERVIEW-400-10/3/3 (1)</span>
               <span class="tiles__description"><p>Project Name: Proposed Design, Construction and Completion of IDFO Works for Terengganu Digital (Phase 1) at Block F, Ladang Business Centre, Kuala Terengganu, Terengganu Darul Iman for Cyberview Sdn Bhd</p>
                        <p>Closing Date: TBC</p></span>
          </div>
            <span class="tiles__cta">Details <i class="icon-chevron-small-right align-middle"></i></span>
</div>

的CSS：

 .tiles--medium-bottom {
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: cubic-bezier(0.5, 0.05, 0.5, 1);
     transition-property: color;

     position: relative;
     margin: 10px 0;
     color: #fefefe;
     overflow: hidden;
 }

  .tiles--medium-bottom:after {
     transition-duration: 0.5s;
     transition-delay: 0;
     transition-timing-function: cubic-bezier(0.5, 0.05, 0.5, 1);
     transition-property: opacity;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background-color: #00f75e;
     content: '';
     z-index: 0;
     opacity: 0;
  } 


    .tiles--medium-bottom:hover {
      color: #404143;
     }

当我悬停时，将显示说明，标题和说明将变为深灰色。背景颜色变为浅绿色。

我想禁用悬停并显示描述，而不会影响使用同一类的其他元素。基本上它看起来像没有任何悬停效果：

获得上述图片的最佳方式是什么？

Answer 1

请在您的css文件中添加此类： -

.nav-first > li > .nav__link:hover:after, .nav-first > li > .nav__link.is-hover:after { background-color: transparent !important; }

.nav-first > li > .nav__link:hover, .nav-first > li > .nav__link.is-hover {
color: #fff !important;

}

Answer 2

所以，我建议你添加一个特定的类并使用它管理样式

<div class="tiles--medium-bottom yourclass">


.tiles--medium-bottom.yourclass: after {
    display: none; }
.tiles--medium-bottom.yourclass:hover .tiles__headline, .tiles--medium-bottom.yourclass:hover .tiles__description, .tiles--medium-bottom.yourclass:hover .tiles__cta {
    color: #FFF;
}

Answer 3

我建议您为div添加一个唯一的ID或类，并将其与正常状态的CSS链接。

<div class="tiles--medium-bottom no-hover">

在你的CSS中

.tiles--medium-bottom.no-hover:hover {
  color: #fff;
}
.tiles--medium-bottom,
.tiles--medium-bottom.no-hover:hover {
  transition-duration: 0.5s;
  transition-delay: 0;
  transition-timing-function: cubic-bezier(0.5, 0.05, 0.5, 1);
  transition-property: color;
  position: relative;
  margin: 10px 0;
  color: #fefefe;
  overflow: hidden;
}

.tiles--medium-bottom:after,
.tiles--medium-bottom:after.no-hover:hover {
   transition-duration: 0.5s;
   transition-delay: 0;
   transition-timing-function: cubic-bezier(0.5, 0.05, 0.5, 1);
   transition-property: opacity;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: #00f75e;
   content: '';
   z-index: 0;
   opacity: 0;
}
.tiles--medium-bottom.no-hover .tiles__description {
  opacity: 1;
  height: auto;
  top: 0;
}

有没有办法禁用悬停在某个div /元素上？

3 个答案: