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

这里的实时预览：http://cyberview.com.my/tender/tender-listing 有没有办法停用某个div /元素上的悬停？

在页面还有的这个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; 
    }

当我徘徊，说明会出现，标题和说明会改变深灰色。背景颜色变为浅绿色。

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

什么去要达到上述形象的最佳方式是什么？

来源

2017-04-17 rory-h

你有存取权限的CSS文件。如果是这样，你可以删除为'：hover'写的悬停效果。 –

我可以删除悬停效果，但这并不可取，因为它可能会影响其他使用我不知道的相同类的元素。 –

您可以发布悬停和正常状态的CSS吗？ –

所以，我建议你使用添加特定类和管理风格也

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

来源

2017-04-17 04:49:49 kebir

我建议你添加一个唯一的ID或类div和你的正常状态的CSS IT连锁。

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

来源

2017-04-17 04:56:31

我认为我现在的问题是，我想摆脱这种淡入淡出效果，当我悬停。并且只是从一开始就将描述出现。我无法弄清楚当我悬停时如何确保这种转换正在发生。 –

请在你的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;

}

来源

2017-04-17 05:20:07

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

回答

相关问题