New Topic/Question
Reply
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>A Christmas Carol</title>
<link rel="stylesheet" href="send.css" type="text/css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="send.js" type="text/javascript"></script>
</head>
<body>
<div id="switcher">
<h3>Style Switcher</h3>
<div class="button" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
</body>
</html>
CSS:
#switcher {
float: right;
background-color: #ddd;
border: 1px solid #000;
margin: 10px;
padding: 10px;
font-size: .9em;
}
#switcher h3 {
margin: 0;
}
#switcher .button {
width: 100px;
float: left;
text-align: center;
margin: 10px;
padding: 10px;
background-color: #fff;
border-top: 3px solid #888;
border-left: 3px solid #888;
border-bottom: 3px solid #444;
border-right: 3px solid #444;
}
.hov {
cursor: pointer;
background-color: red;
}
jQuery:
$(function() {
$(".button").hover(function() { $(this).addClass("hov"); }, function() { $(this).removeClass("hov"); });
});
I have a div with id switcher in my HTML page. Inside, there are 3 buttons with class button attached to them. I have attached an external stylesheet where I have defined the style .hov {background: red; cursor:pointer; }. The code is supposed to change the cursor to pointer and give the button a red background when mouse hovers over it. However, only the cursor is changing to pointer, background color is remaining unchanged. Also when I modify the CSS selector from .hov to #switcher .hov , the code works as expected, i.e. both pointer changes to cursor and background turns red when hovered. Can you tell me why is this happening? There are no other elements in the page (like say, image) with class button, so .hov is supposed to work just as fine as #switcher .hov. The selector should work fine without the additional specification, but it doesn't. Can anyone tell me why?
MultiQuote
| 