要素の上にマウスを置いたときに隣接する要素をどのように効果させないか？

私はhtmlとCSSを使用してワークフローの箇条書きポイントを実装しようとしていますが、divに境界線を追加するためにホバーを使用しましたが、近くの要素に影響します。要素の上にマウスを置いたときに隣接する要素をどのように効果させないか？

.bullets { 
    display: inline-block; 
    height: 7px; 
    width: 7px; 
    background-color: grey; 
    border-radius: 50%; 
} 

.bullets:hover { 
    border: 5px solid lightgrey; 
} 

p { 
    display: inline; 
    margin-left: 5px; 
} 

.bulletChild { 
    margin-left: 20px; 
}

<body> 
    <div class="block"> 
    <div class="bullets"></div> 
    <p>this is workflowy clone</p> 
    <div class="bulletChild"> 
     <div class="bullets"></div> 
     <p>this is workflowy clone</p> 
    </div> 
    </div> 
</body>

私のバイオリン：https://jsfiddle.net/renx777/mwvx8zdz/3/

出典

2017-07-17 Renuka Prasad A

何もするので、起こりません'bullets'クラスを持つ要素は空です。 [mcve]を入力してください。 –

弾丸の周囲には常に境界線を置いてくださいが、非ホバー状態では透明にしてください。これにより、ホバーの移動が防止されます。 – Korgrue

あなたが本当にリストのULやOLのタグを使用する必要があります。

しかし、その代わりに境界線を使用しての、あなたはボックスシャドウを使用することができ、あなたの現在のHTMLを考える：私はあなたが提供してきましたスニペットで何にカーソルを合わせると

.bullets { 
 
    display:inline-block; 
 
    height: 7px; 
 
    width: 7px; 
 
    background-color:grey; 
 
    border-radius:50%; 
 
} 
 

 
.bullets:hover { 
 
    box-shadow: 0 0 0 5px black; 
 
} 
 

 
p { 
 
    display:inline; 
 
    margin-left:5px; 
 
} 
 

 

 
.bulletChild { 
 
    margin-left:20px; 
 
}

<body> 
 

 
    
 
    <div class="block"> 
 
    <div class="bullets"></div> 
 
    <p>this is workflowy clone</p> 
 
    <div class="bulletChild"> 
 
     <div class="bullets"></div> 
 
     <p>this is workflowy clone</p> 
 
    </div> 
 
    
 
    </div>

出典

2017-07-17 15:56:39 VilleKoo

要素の上にマウスを置いたときに隣接する要素をどのように効果させないか？

答えて

関連する問題