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

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 {
背景色:透明!重要；
}

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