CSS3 hover与animation均失效，鼠标触发div滑出展示文本功能无法实现

问题排查结果 #

核心错误点

1. CSS优先级冲突：目标元素同时设置了id属性divHover和class属性hoverButton，id选择器#divHover的优先级远高于类选择器div.hoverButton:hover，导致hover状态下设置的width属性被id的样式覆盖，无法生效。
2. 定位属性缺失：动画中使用了left属性控制位移，但元素默认是position: static，left属性对静态定位的元素完全不生效，所以动画没有任何效果。
3. HTML语法错误：<p>标签是段落标签，规范中不允许嵌套块级元素<ul>，浏览器渲染时会自动把<p>提前闭合，导致<ul>变成了div的直接子元素，你写的div.hoverButton:hover>p相关选择器逻辑完全不匹配实际DOM结构。
4. 显示逻辑错误：仅设置了hover时p标签显示，但原本隐藏的是div ul，hover时没有修改ul的display属性，所以即使其他逻辑正常，ul也不会展示。

修复后可运行代码 #

CSS部分

#divHover {
  width: 30px;
  height: 260px;
  background-color: burlywood;
  font-size: 12pt;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', 'Arial', 'sans-serif';
  float: left;
  /* 新增定位属性，让left属性生效 */
  position: relative;
  /* 仅需要宽度平滑变化的话加transition即可，不需要写复杂的keyframe动画 */
  transition: width 0.3s ease;
  overflow: hidden;
}

#divHover ul {
  display: none;
  margin: 10px 0 0 0;
  padding-left: 20px;
  width: 270px;
}

/* 用id:hover选择器，优先级足够覆盖原有样式 */
#divHover:hover {
  width: 300px;
  /* 如果需要位移动画就保留下面三行，不需要可以删掉 */
  animation-name: listOut;
  animation-duration: 3s;
  animation-iteration-count: 1;
}

#divHover:hover ul {
  display: block;
}

@keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

@-moz-keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

@-webkit-keyframes listOut {
  from {
    left: 0px;
  }
  to {
    left: 270px;
  }
}

HTML部分

<div class="hoverButton" id="divHover">
  <!-- 把p换成div，避免嵌套块级元素的语法错误 -->
  <div>
    D<br>i<br>d<br><br>y<br>o<br>u<br><br>k<br>n<br>o<br>w<br>?<br>
    <ul>
      <li>Only 10% of people who look at a webpage are actually looking for information. Most people are just looking for some form of entertainment</li>
    </ul>
  </div>
</div>

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