我有以下代码:
null
.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>null
所以当我悬停在这个区域上时，会出现一个黑色的边框。 我还添加了一个图标，该图标包含在节-controllersdiv中。 我希望这个整个div只在区段悬停时才出现，就像边框出现的方式一样。
我一直在尝试玩这个:只使用CSS，在鼠标悬停在>上时显示div； 但我不能让它工作。 我使用过Bootstrap 5，但在这里并不重要。
您可以使用您已经使用的选择器(page-section:hover)，只需在它后面添加.section-controllers，这样您就可以像.page-section:hover.section-controllers{}那样使用它。
null
.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>
你可以做这样的事。
null
.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>