No replies
frederickrl
frederickrl's picture
Offline
newbie
Last seen: 4 years 31 weeks ago
Timezone: GMT-5
Joined: 2015-02-10
Posts: 3
Points: 5

Hello i have a little problem that im not sure if can be solved. I have a child div that when i hover over it it blinks. I do have a hover action in its parent take a look
-------------------------------------------------------------
html
-------------------------------------------------------------

<!DOCTYPE html>
<html>
 
	<head>
		<title>Don't touch the red</title>
		<link rel="stylesheet" type="text/css" href="game.css" />
	</head>
 
 
	<body>
		<div id="green-start">
			<p>Start here</p>
			<p id="start-here">Start in the green square</p>
			</div>
 
 
 
 
 
 
 
 
 
 
 
</div>
	</body>
 
 
 
</html>

--------------------------------------------------------------
css
-----------------------------------------------------
body {
background: #ccc;
 
}
#green-start {
background: #494;
width: 200px;
height: 100px;
border-radius: 10px;
position: absolute;
top: 310px;
left:40px;
overflow: visible;
border: 1px solid black;
}
 
#green-start:hover {
 
background-color: #161;
border: 1px solid black;
 
}
#green-start p {
 
font-size: 25px;
position: absolute;
bottom: 10px;
left: 40px;
font-family:segoe script;
}
#start-here {
font-size:40px;
height: 40px;
left: 30px;
width: 400px;
margin: 0px;
padding: 0px;
background-color: #da6;
border-radius: 10px;
position: relative;
top: -200px;
text-align: center;
 
}
#green-start:hover  > #start-here {
display: none;
 
}
#start-here:hover {
display: block;
}
#start-here: hover  p{
display: visible;
 
}