css位置を指定したホバリングリスト

Question

私のリスト要素のホバリングに問題があります。

私がホバーに行くと、2つのことが起こるようです。

1）私がリストの上にマウスを置くと、要素の幅が必要なように拡大されますが、要素の1つがその場所にプッシュされます。絶対に設定されているためですそれ以外の方法で。

2）マウスを外すと、すべての要素が外れているように見えます。

私が望むのは、各リストにマウスカーソルを置いて、それをテキストで拡大し、他の要素を移動させないことです。

ここでは、コードです：

.menu-right { 
 
    right: 0 
 
} 
 
.icon-steeringWheel { 
 
    background-color: red; 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 
.visualiser-menu { 
 
    display: flex; 
 
    position: absolute; 
 
} 
 
.visualiser-menu ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
} 
 
.visualiser-menu ul li { 
 
    display: flex; 
 
    flex-direction: row; 
 
    margin-bottom: 20px; 
 
} 
 
.visualiser-menu ul li .visualiser-menu-btn { 
 
    background-color: #333333; 
 
    color: white; 
 
    width: 45px; 
 
    height: 44px; 
 
    padding: 11px; 
 
    transition: all 0.3s ease 0s; 
 
    font-size: 1.5rem; 
 
    text-align: center; 
 
    padding: 11px; 
 
    display: inline-flex; 
 
} 
 
.visualiser-menu ul li .visualiser-menu-btn span { 
 
    margin-right: 10px; 
 
} 
 
.visualiser-menu ul li .visualiser-menu-btn:hover { 
 
    background-color: blue; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 230px; 
 
}

<div class="visualiser-menu menu-right"> 
 
    <ul> 
 
    <li><a class="visualiser-menu-btn" id="selectModel" href="#"><span class="icon-steeringWheel ui-"></span> this is some text</a> 
 
    </li> 
 
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a> 
 
    </li> 
 
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a> 
 
    </li> 
 
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

あなたがホバー上のリスト項目position: absoluteを与えるときは、ドキュメントフローから削除は。これは、他のリストアイテムが存在していることさえも知らないので、それらがホバリングアイテムのオリジナルスペースを占有することを意味します。だからこそ、あなたは変化を得ているのです。

コードを大量に再構築することなく、リスト項目を移動したときに失われた領域を補う必要があります。

1つの方法は、ホバーが発生するのと同時にリスト項目の高さを定義することです。

これは例です（最初のリスト項目のみ）。

.menu-right { 
 
    right: 0; 
 
} 
 
.icon-steeringWheel { 
 
    background-color: red; 
 
    width: 40px; 
 
    height: 40px; 
 
} 
 
.visualiser-menu { 
 
    display: flex; 
 
    position: absolute; 
 
} 
 
.visualiser-menu ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    padding-left: 0; 
 
} 
 
.visualiser-menu ul li { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: flex-end; 
 
    /* NEW */ 
 
    margin-bottom: 20px; 
 
} 
 
.visualiser-menu ul li .visualiser-menu-btn { 
 
    background-color: #333333; 
 
    color: white; 
 
    width: 45px; 
 
    height: 44px; 
 
    padding: 11px; 
 
    transition: all 0.3s ease 0s; 
 
    font-size: 1.5rem; 
 
    text-align: center; 
 
    display: inline-flex; 
 
} 
 
.visualiser-menu ul li .visualiser-menu-btn span { 
 
    margin-right: 10px; 
 
} 
 
.visualiser-menu ul li:first-child:hover { 
 
    height: 65px; 
 
} 
 
/* NEW */ 
 

 
.visualiser-menu ul li:first-child .visualiser-menu-btn:hover { 
 
    background-color: blue; 
 
    position: absolute; 
 
    right: 0; 
 
    width: 230px; 
 
}

<div class="visualiser-menu menu-right"> 
 
    <ul> 
 
    <li><a class="visualiser-menu-btn" id="selectModel" href="#"><span class="icon-steeringWheel ui-"></span> this is some text</a> 
 
    </li> 
 
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a> 
 
    </li> 
 
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a> 
 
    </li> 
 
    <li><a class="visualiser-menu-btn" href="#"><span class="icon-steeringWheel"></span> this is some text</a> 
 
    </li> 
 
    </ul> 
 
</div>