如何製作基本形狀CSS懸停效果？

根據網頁設計我應該使css hover的效果。如何製作基本形狀CSS懸停效果？

目前我完成懸停效果的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>

來源

2017-07-30 N. Jehnsen M

這是你想要的嗎？ https://jsfiddle.net/sn1woowt/ –

當某個人將鼠標懸停在菜單點上時，是否要更改網站的內容？在這種情況下，您正在尋找錯誤的方向。你可以用JS來做，但一般來說這就是一些React/Angular的東西...... – hansTheFranz

你做的大部分工作已經。您只需將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>

來源

2017-07-30 11:29:06 Nisarg

在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來實現這個，查看出來

來源

2017-07-30 11:31:38 M0ns1f

你只需要在懸停時更改background-color並使用pseudoelement顯示三角形。演示：

.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>

來源

2017-07-30 11:45:35

如何製作基本形狀CSS懸停效果？

回答

相關問題