Hover klappt nur bedingt innerhalb einer von mir definierten Box

[Richie]

Mein Wunsch ist es, das beim Hover über die Box die unter Li abgespeichert ist , das sich die Farbe der Box ändert, tut sie aber nur bedingt, nämlich nur da wo Schrift ist, wo nichts ist, also innerhalb der Box, aber eben keine Schrift tut sich nichts.

  
  
.box li {  
	float: left;  
	text-align: center;  
	border: #C0C0C0 1px solid;  
	width:240px;  
	height:200px;  
	margin:10px;  
	}  
  
.box h1 {  
	font-size: 18px;  
	font-weight: bold;  
	height:50px;  
	border-bottom: #C0C0C0 1px solid;  
	margin:0 0 10px 0;  
	}  
	  
.box p {  
	margin:0;  
	padding:10px;  
	height:90px;  
	font-size: 13px;  
	}	  
  
.box li :hover{  
	background: #ff0000;  
	}  

  
<ul class="box">  
	<li>  
		<h1>Das ist die<br/>Überschrift</h1>  
		<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>  
		<a href="URI">read more</a>  
	</li>  
	<li>  
		<h1>Das ist die<br/>Überschrift</h1>  
		<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>  
		<a href="URI">read more</a>  
	</li>  
	<li>  
		<h1>Das ist die<br/>Überschrift</h1>  
		<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>  
		<a href="URI">read more</a>  
	</li>  
	<li>  
		<h1>Das ist die<br/>Überschrift</h1>  
		<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text </p>  
		<a href="URI">read more</a>  
	</li>  
</ul>  

Richie

[Gunther]

Hallo,

wenn ich dich richtig verstanden habe, dann hast du ein Leerzeichen zu viel ...

.box li:hover {  
	background: #ff0000;  
}  

Gruß Gunther

[Richie]

Ja so eine ****************

Danke

Richie

wenn ich dich richtig verstanden habe, dann hast du ein Leerzeichen zu viel ...

.box li:hover {

background: #ff0000;
}

>   
>   
> Gruß Gunther

[machIT]

Hier sollte kein Leerzeichen sein!

.box li:hover{
 background: #ff0000;
}