ベースシェイプのCSSホバー効果を作成する方法は？

Question

ウェブデザインによれば、私はCSSを作るべきですhover効果。

現在、ホバー効果のためにCSSシェイプを行っていますが、これをホバー効果に実装する方法はわかりません。

これにJavaScriptを使用する必要がありますか、これを達成するための他の方法がありますか？してください、私はこれを手伝って、私は本当にこれに固執しています。より良く理解するために、最終版は、以下の画像に次のようになります。ここでは

私はホバー効果として実装する必要があることを、CSSの形状の一例です。このHTMLコードに

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

私はあなたが既にほとんどの作業を行ってきたホバー効果=>

<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

を実装する必要があります。 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 2

ただhover に再度追加するよりも、beforeでleft borderを削除プラスそれはexemple

.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でこれをチェックしてください。

Answer 3

ホバーで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>