我希望我的元素<a>被隱藏，當懸停在 div 中時，顯示將可用。
我希望我的元素<a>具有懸停效果，它可以在懸停時使用。
<div class="task-list">
<ul>
{% for i in list %}
<li class="todo-listing">
<div class="div-for-listing">
<form class="form-list" action="{{url_for('to_do_list')}}" method="post">
<input class="checkbox-list" type="checkbox" id=list-{{i.id}} name=list-{{i.id}} value="ongoing" onclick="toggle_check()">
<label class="todo-listing-data" for=list-{{i.id}}> {{i.task}}</label>
<a href=""></a>
<a href="#"><i class="fa-sharp fa-solid fa-xmark" id="delete-button"></i></a>
<br>
</form>
</div>
</li>uj5u.com熱心網友回復：
您可以通過定位:hover偽類來做到這一點，這里我選擇了 parent <div>，.div-for-listing
.div-for-listing a {
display: none
}
.div-for-listing:hover a {
display: block
}<div class="task-list">
<ul>
{% for i in list %}
<li class="todo-listing">
<div class="div-for-listing">
<form class="form-list" action="{{url_for('to_do_list')}}" method="post">
<input class="checkbox-list" type="checkbox" id=list-{{i.id}} name=list-{{i.id}} value="ongoing" onclick="toggle_check()">
<label class="todo-listing-data" for=list-{{i.id}}> {{i.task}}</label>
<a href="">Link</a>
<a href="#"><i class="fa-sharp fa-solid fa-xmark" id="delete-button"></i></a>
<br>
</form>
</div>
</li>
</ul>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/525678.html
標籤：htmlcss
上一篇：將導航欄設定在右側