Question

.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>

Answer 1

删除.header-news-item之间的空格并：将鼠标悬停在CSS声明中，使其显示为 .header-news-item：hover ，而不是 .header-news- item：悬停。

Answer 2

类选择器和.header-news-item伪类选择器之间有descendant combinator（:hover）。删除它。

CSS：悬停类正在影响内部div

2 个答案: