CSS :hover 类正在影响内部 div答案

【问题标题】：CSS :hover class is affecting inner divsCSS :hover 类正在影响内部 div
【发布时间】：2014-12-07 15:01:37
【问题描述】：

.header-news-item {
   height:35px; 
   width:250px; 
   font-size:11px; 
   border: 2px solid #ddeeee; 
   float:left; 
   margin:0px 10px; 
   padding:7px; 
   padding-top: 5px;
   border-radius: 7px; 
   line-height:1.3; 
   background-color:#f9f9f9;

}

.header-news-item :hover {
    border: 2px solid #aadddd; 
    background-color:#f9f9f9;

}

我有一个显示边框的 div 元素。我想在悬停事件上更改此边框的颜色。所以我在 CSS 中定义了 :hover 伪类。问题是，这个 div 的边界没有改变，而是内部 div 的边界没有改变。这是为什么？我该如何解决？

<div class="header-news-item">

    <div> title        </div>   <- 
    <div> subtitle     </div>   <- borders of these inner divs are changed
    <div> read more... </div>   <-

</div>

【问题讨论】：

标签： html css hover border mousehover

【解决方案1】：

删除 CSS 声明中 .header-news-item 和 :hover 之间的空格，使其显示为 .header-news-item:hover 而不是 .header-news-项目：悬停。

【讨论】：

【解决方案2】：

在.header-news-item 类选择器和:hover 伪类选择器之间有一个descendant combinator ()。删除它。

【讨论】：

天哪，这是一个恶意语法错误。尽管简单的空白可以有所作为，但我永远不会想到。谢谢