如何使基本形狀的CSS懸停效果？

Question

根據網頁設計，我應該使css hover效果。

目前，我已經完成了用於懸停效果的CSS形狀，但是我真的不知道如何將其實現為懸停效果。

我應該為此使用JavaScript還是有其他方法可以實現此目的？ 請幫幫我，我真的很堅持。 為了更好地理解，最終版本應如下圖所示：

這是CSS形狀的示例，我需要將其實現為懸停效果。

 #base { background: #0a863d; display: inline-block; height: 66px; margin-top: 20px; margin-right: 55px; position: relative; width: 500px; } #base:before { border-left: 35px solid #0a863d; border-top: 33px solid transparent; border-bottom: 33px solid transparent; content: ""; height: 0; top: 0; position: absolute; right: -35px; width: 0; } 

 <div id="base"></div> 

對於此HTML代碼，我需要實現懸停效果=>

<div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12">
  <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
  <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
  <div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
  <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
  <div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
  <div class="shadow-effect"><p class="may">ООО Май</p></div>
</div>

Answer 1

您只需要更改懸停時的background-color並使用偽元素顯示三角形即可。 演示：

 .left-menu { width: 250px; } .left-menu-item { position: relative; /* height to fit triangle to the right */ height: 66px; /* styles for centering text */ display: flex; /* center vertically */ align-items: center; /* center horizontally */ justify-content: center; /* just styles for demo */ background-color: #066d30; color: #fff; font-weight: bold; } /* change background-color on hover */ .left-menu-item:hover { background-color: #1d8631; } /* show triangle on hover */ .left-menu-item:hover:after { content: ""; position: absolute; left: 100%; top: 0; border-left: 33px solid #1d8631; border-top: 33px solid transparent; border-bottom: 33px solid transparent; } 

 <div class="left-menu"> <div class="left-menu-item">Ottogi</div> <div class="left-menu-item">Sayou Hapyo</div> <div class="left-menu-item">Natura Bogata</div> <div class="left-menu-item">TOO Many</div> </div> 

Answer 2

您已經完成了大部分工作。 您只需要將CSS選擇器#base和#base:before更改為.shadow-effect:hover和.shadow-effect:hover:before 。 這意味着，當用戶將鼠標懸停在它們上時，該效果現在將應用於您的.shadow-effect div。

另外，由於您已經為懸停設計提供了一些高度，寬度和邊距，因此我也將它們添加到了.shadow-effect中。 因此，當您需要修改它們時，請在兩個類中進行更改。 否則，理想情況下，您應該從.shadow-effect:hover樣式中刪除這些樣式。

 .shadow-effect { height: 66px; margin-top: 20px; margin-right: 55px; width: 500px; } .shadow-effect:hover { background: #0a863d; display: inline-block; height: 66px; margin-top: 20px; margin-right: 55px; position: relative; width: 500px; } .shadow-effect:hover:before { border-left: 35px solid #0a863d; border-top: 33px solid transparent; border-bottom: 33px solid transparent; content: ""; height: 0; top: 0; position: absolute; right: -35px; width: 0; } 

 <div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12"> <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div> <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div> <div class="shadow-effect"><p class="natura">Natura Bogata</p></div> <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div> <div class="shadow-effect"><p class="dongush">Dongsuh</p></div> <div class="shadow-effect"><p class="may">ООО Май</p></div> </div> 

Answer 3

只是刪除了before left border ，而不是再次將其添加到hover並添加了一個框陰影，因此它看起來像一個示例

 .shadow-effect { display: inline-block; height: 66px; position: relative; width: 500px; text-align:center; } p{ line-height:2em; color:#fff; } .container{ padding-top:10px; background-color:#055f2a; width: 500px; } .shadow-effect:hover{ -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); background: #0a863d; } .shadow-effect:hover:before { border-left: 35px solid #0a863d; } .shadow-effect:before { border-top: 33px solid transparent; border-bottom: 33px solid transparent; content: ""; height: 0; top: 0; position: absolute; right: -35px; width: 0; } 

 <div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12 container"> <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div> <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div> <div class="shadow-effect"><p class="natura">Natura Bogata</p></div> <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div> <div class="shadow-effect"><p class="dongush">Dongsuh</p></div> <div class="shadow-effect"><p class="may">ООО Май</p></div> </div> 

您只能使用CSS來實現，請檢查一下