鼠标悬停图片时无法同时修改border-radius和显示列表问题排查

你的代码里，图片的border-radius修改是能生效的，但列表无法显示的核心问题是CSS选择器写错了：

你写的.list-image:hover .list，意思是「当.list-image被hover时，选中它内部的.list子元素」，但看HTML结构，.list是和.list-image同级的兄弟元素，不是图片的子元素，所以这个选择器根本找不到目标元素，自然无法触发显示。

修复方案 #

方案1：用相邻兄弟选择器（最贴合当前结构） #

把触发列表显示的CSS代码改成：

.list-image:hover + .list {
  display: block;
}

+是CSS相邻兄弟选择器，专门用来选中「当前元素的下一个同级兄弟元素」，刚好匹配你图片和列表的结构。

方案2：通过父容器hover触发（更灵活，适合结构可能变化的情况） #

如果后续页面结构调整，列表不一定紧跟在图片后面，可以改成监听父容器.container的hover状态：

.container:hover .list {
  display: block;
}
/* 图片的hover效果保留 */
.list-image:hover {
  border-radius: 75px;
}

完整修复后的代码示例 #

CSS #

ul {
  list-style-type: none;
}

.list {
  position: relative;
  top: 2.5rem;
  left: 1.5rem;
  width: max-content;
  display: none;
}

.list-item {
  border: 1px solid black;
  padding: 0.5rem;
}

.list-image {
  float: left;
  shape-outside: circle(25% at 100px 50px);
  margin-right: 3rem;
  position: relative;
  z-index: 2;
  transition: all 0.5s ease-in-out;
}

.list-image:hover {
  border-radius: 75px;
}

/* 用相邻兄弟选择器修复 */
.list-image:hover + .list {
  display: block;
}

HTML #

<div class="container">
  <img src="https://unsplash.it/150/150" alt="" class="list-image">
  <ul class="list">
    <li class="list-item">Lorem ipsum dolor sit amet.</li>
    <li class="list-item">Odio ullam debitis labore consequuntur?</li>
    <li class="list-item">Itaque a voluptas excepturi libero!</li>
    <li class="list-item">Sed nihil dolore ipsa aut!</li>
    <li class="list-item">Maxime nulla nostrum alias maiores.</li>
  </ul>
</div>

这样修改后，鼠标悬停图片时，图片会变成圆形，同时列表也会正常显示。

内容的提问来源于stack exchange，提问作者IT Guy