为什么我的图标容器始终可见而不是悬停时出现？
Why is my icon container always visible instead of appearing on hover?
我有以下代码：
.page-section {
border: 4px solid rgba(0,0,0, 0);
padding: 10px;
box-sizing: border-box;
transition: border 1s ease-out;
}
.page-section:hover {
border: 4px solid #000000;
padding: 10px;
box-sizing: border-box;
transition: border .5s ease-in;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="page-section">
<div class="section-controllers">
<div class="section-delete">
<a href="#">
<svg width="14px" height="15px" viewBox="0 0 16 16" class="bi bi-archive" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 5v7.5c0 .864.642 1.5 1.357 1.5h9.286c.715 0 1.357-.636 1.357-1.5V5h1v7.5c0 1.345-1.021 2.5-2.357 2.5H3.357C2.021 15 1 13.845 1 12.5V5h1z"/>
<path fill-rule="evenodd" d="M5.5 7.5A.5.5 0 0 1 6 7h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zM15 2H1v2h14V2zM1 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H1z"/>
</svg>
</a>
</div>
</div>
<div class="container">
<div class="row row-control">
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias deleniti, ut deserunt, sunt obcaecati pariatur quis explicabo, suscipit laboriosam commodi laudantium eveniet aliquid. Minus ipsam, quas quasi vero maxime natus?
</div>
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptates quo delectus nihil tempore ipsa laborum fuga, nulla vitae. Dolore quibusdam veniam, soluta incidunt pariatur enim. Doloremque aut quas provident!
</div>
</div>
</div>
</section>
因此，当我将鼠标悬停在该部分上时，会出现黑色边框。我还添加了一个包含在 section-controllers div 中的图标。我希望整个 div 只在该部分悬停时出现，就像边框的显示方式一样。
我一直在尝试玩这个：Using only CSS, show div on hover over <a>
但我无法让它工作。我用过 Bootstrap 5 但这并不重要。
您可以使用您已经在使用的相同选择器 (page-section:hover)，只需添加
.section-controllers 在它后面所以你可以像 .page-section:hover .section-controllers {}.
一样使用它
.page-section {
border: 4px solid rgba(0,0,0, 0);
padding: 10px;
box-sizing: border-box;
transition: border 1s ease-out;
}
.page-section:hover {
border: 4px solid #000000;
padding: 10px;
box-sizing: border-box;
transition: border .5s ease-in;
}
.section-controllers {
display: none;
position: absolute;
top: 15px;
left: 15px;
}
.page-section:hover .section-controllers {
display: block;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="page-section">
<div class="section-controllers">
<div class="section-delete">
<a href="#">
<svg width="14px" height="15px" viewBox="0 0 16 16" class="bi bi-archive" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 5v7.5c0 .864.642 1.5 1.357 1.5h9.286c.715 0 1.357-.636 1.357-1.5V5h1v7.5c0 1.345-1.021 2.5-2.357 2.5H3.357C2.021 15 1 13.845 1 12.5V5h1z"/>
<path fill-rule="evenodd" d="M5.5 7.5A.5.5 0 0 1 6 7h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zM15 2H1v2h14V2zM1 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H1z"/>
</svg>
</a>
</div>
</div>
<div class="container">
<div class="row row-control">
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias deleniti, ut deserunt, sunt obcaecati pariatur quis explicabo, suscipit laboriosam commodi laudantium eveniet aliquid. Minus ipsam, quas quasi vero maxime natus?
</div>
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptates quo delectus nihil tempore ipsa laborum fuga, nulla vitae. Dolore quibusdam veniam, soluta incidunt pariatur enim. Doloremque aut quas provident!
</div>
</div>
</div>
</section>
你可以这样做。
.page-section {
border: 4px solid rgba(0,0,0, 0);
padding: 10px;
box-sizing: border-box;
transition: border 1s ease-out;
}
.page-section:hover {
border: 4px solid #000000;
padding: 10px;
box-sizing: border-box;
transition: border .5s ease-in;
}
.page-section .section-delete{
display:none;
}
.page-section:hover .section-delete{
display:block;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="page-section">
<div class="section-controllers">
<div class="section-delete">
<a href="#">
<svg width="14px" height="15px" viewBox="0 0 16 16" class="bi bi-archive" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 5v7.5c0 .864.642 1.5 1.357 1.5h9.286c.715 0 1.357-.636 1.357-1.5V5h1v7.5c0 1.345-1.021 2.5-2.357 2.5H3.357C2.021 15 1 13.845 1 12.5V5h1z"/>
<path fill-rule="evenodd" d="M5.5 7.5A.5.5 0 0 1 6 7h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zM15 2H1v2h14V2zM1 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H1z"/>
</svg>
</a>
</div>
</div>
<div class="container">
<div class="row row-control">
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias deleniti, ut deserunt, sunt obcaecati pariatur quis explicabo, suscipit laboriosam commodi laudantium eveniet aliquid. Minus ipsam, quas quasi vero maxime natus?
</div>
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptates quo delectus nihil tempore ipsa laborum fuga, nulla vitae. Dolore quibusdam veniam, soluta incidunt pariatur enim. Doloremque aut quas provident!
</div>
</div>
</div>
</section>
我有以下代码：
.page-section {
border: 4px solid rgba(0,0,0, 0);
padding: 10px;
box-sizing: border-box;
transition: border 1s ease-out;
}
.page-section:hover {
border: 4px solid #000000;
padding: 10px;
box-sizing: border-box;
transition: border .5s ease-in;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="page-section">
<div class="section-controllers">
<div class="section-delete">
<a href="#">
<svg width="14px" height="15px" viewBox="0 0 16 16" class="bi bi-archive" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 5v7.5c0 .864.642 1.5 1.357 1.5h9.286c.715 0 1.357-.636 1.357-1.5V5h1v7.5c0 1.345-1.021 2.5-2.357 2.5H3.357C2.021 15 1 13.845 1 12.5V5h1z"/>
<path fill-rule="evenodd" d="M5.5 7.5A.5.5 0 0 1 6 7h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zM15 2H1v2h14V2zM1 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H1z"/>
</svg>
</a>
</div>
</div>
<div class="container">
<div class="row row-control">
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias deleniti, ut deserunt, sunt obcaecati pariatur quis explicabo, suscipit laboriosam commodi laudantium eveniet aliquid. Minus ipsam, quas quasi vero maxime natus?
</div>
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptates quo delectus nihil tempore ipsa laborum fuga, nulla vitae. Dolore quibusdam veniam, soluta incidunt pariatur enim. Doloremque aut quas provident!
</div>
</div>
</div>
</section>
因此，当我将鼠标悬停在该部分上时，会出现黑色边框。我还添加了一个包含在 section-controllers div 中的图标。我希望整个 div 只在该部分悬停时出现，就像边框的显示方式一样。
我一直在尝试玩这个：Using only CSS, show div on hover over <a> 但我无法让它工作。我用过 Bootstrap 5 但这并不重要。
您可以使用您已经在使用的相同选择器 (page-section:hover)，只需添加
.section-controllers 在它后面所以你可以像 .page-section:hover .section-controllers {}.
.page-section {
border: 4px solid rgba(0,0,0, 0);
padding: 10px;
box-sizing: border-box;
transition: border 1s ease-out;
}
.page-section:hover {
border: 4px solid #000000;
padding: 10px;
box-sizing: border-box;
transition: border .5s ease-in;
}
.section-controllers {
display: none;
position: absolute;
top: 15px;
left: 15px;
}
.page-section:hover .section-controllers {
display: block;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="page-section">
<div class="section-controllers">
<div class="section-delete">
<a href="#">
<svg width="14px" height="15px" viewBox="0 0 16 16" class="bi bi-archive" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 5v7.5c0 .864.642 1.5 1.357 1.5h9.286c.715 0 1.357-.636 1.357-1.5V5h1v7.5c0 1.345-1.021 2.5-2.357 2.5H3.357C2.021 15 1 13.845 1 12.5V5h1z"/>
<path fill-rule="evenodd" d="M5.5 7.5A.5.5 0 0 1 6 7h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zM15 2H1v2h14V2zM1 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H1z"/>
</svg>
</a>
</div>
</div>
<div class="container">
<div class="row row-control">
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias deleniti, ut deserunt, sunt obcaecati pariatur quis explicabo, suscipit laboriosam commodi laudantium eveniet aliquid. Minus ipsam, quas quasi vero maxime natus?
</div>
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptates quo delectus nihil tempore ipsa laborum fuga, nulla vitae. Dolore quibusdam veniam, soluta incidunt pariatur enim. Doloremque aut quas provident!
</div>
</div>
</div>
</section>
你可以这样做。
.page-section {
border: 4px solid rgba(0,0,0, 0);
padding: 10px;
box-sizing: border-box;
transition: border 1s ease-out;
}
.page-section:hover {
border: 4px solid #000000;
padding: 10px;
box-sizing: border-box;
transition: border .5s ease-in;
}
.page-section .section-delete{
display:none;
}
.page-section:hover .section-delete{
display:block;
}
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet"/>
<section class="page-section">
<div class="section-controllers">
<div class="section-delete">
<a href="#">
<svg width="14px" height="15px" viewBox="0 0 16 16" class="bi bi-archive" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M2 5v7.5c0 .864.642 1.5 1.357 1.5h9.286c.715 0 1.357-.636 1.357-1.5V5h1v7.5c0 1.345-1.021 2.5-2.357 2.5H3.357C2.021 15 1 13.845 1 12.5V5h1z"/>
<path fill-rule="evenodd" d="M5.5 7.5A.5.5 0 0 1 6 7h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5zM15 2H1v2h14V2zM1 1a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H1z"/>
</svg>
</a>
</div>
</div>
<div class="container">
<div class="row row-control">
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Alias deleniti, ut deserunt, sunt obcaecati pariatur quis explicabo, suscipit laboriosam commodi laudantium eveniet aliquid. Minus ipsam, quas quasi vero maxime natus?
</div>
<div class="col-lg-6 col-control">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa voluptates quo delectus nihil tempore ipsa laborum fuga, nulla vitae. Dolore quibusdam veniam, soluta incidunt pariatur enim. Doloremque aut quas provident!
</div>
</div>
</div>
</section>