Search code examples
htmlcsshoverbordermousehover

CSS :hover class is affecting inner divs

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

}

I have a div element with border displayed. I want to change color of this border on hover event. So I have :hover pseudo-class defined in CSS. Problem is, that border of this div is not changed, but instead of that borders of inner divs are changed. Why is that? How could I fix it?

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

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

</div>
Solution

  • You have a descendant combinator () between the .header-news-item class selector and the :hover pseudo-class selector. Remove it.