有沒有辦法停用某個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 /元素上的懸停？

回答

相關問題