Forums
Thread
How to hover over a box in CSS?
I'm trying to hover over a box and change the background color when the user hovers over it. I am using the hover property in css but as soon as I add a colon and write hover it messes with my box's height and width. Please take a look.
Normal web page.
Trying to implement hover property
What it does to my web page
Full code:
<!DOCTYPE html>
<html>
<head>
<title>Skeleton</title><!-- Using and understanding the box model -->
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<style>
a:hover {
background-color: yellow;
}
strong {
font-size: 19.5px;
}
.boxed{
border:2px solid green;
height: 25px;
width: 172px;
text-align: center;
}
p.a {
font:20px bold, verdana header;
}
.wrap{
width: 1025px;
height: 1500px;
margin-top: 45px;
}
.box {
float: right;
background-color: lightgray;
height: 480px;
width: 800px;
border: 4px solid;
border-color: dimgrey;
}
.box2{
background-color: aliceblue;
height: 1100px;
width: 175px;
border: 4px solid;
border-color: dimgray;
margin-bottom: 5px;
}
.box3{
float:right;
background-color: ghostwhite;
height: 700px;
width: 808px;
margin-top: -620px
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
</div>
<div class="box2">
<div class="boxed">
<strong><a>Content0</a></strong>
</div>
<div class="boxed">
<strong>Content1</strong>
</div>
<div class="boxed">
<strong>Content2</strong>
</div>
<div class="boxed">
<strong>Content3</strong>
</div>
<div class="boxed">
<strong>Content4</strong>
</div>
<div class="boxed">
<strong>Content5</strong>
</div>
<div class="boxed">
<strong>Content</strong>
</div>
<div class="boxed">
<strong>Content</strong>
</div>
<div class="boxed">
<strong>Content</strong>
</div>
<div class="boxed">
<strong>Content</strong>
</div>
<div class="boxed">
<strong>Content</strong>
</div>
<div class="boxed">
<strong>Content</strong>
</div>
</div>
<div class="box3">
</div>
</div>
</body>
</html>
Responses(2)
Why are you changing/setting the height and width instead of letting flow do its job? You have a perfectly good width on the outer container, don't waste time setting the height. You have a perfectly good line-height, don't waste time screwing with those values.
Also being text-bearing containers you should be using EM, instead of telling users with accessibility needs to sod off with PX.
Next up, DRY. Don't repeat yourself. :hover is applied OVER the default values, so anything you've already said has no reason to be said again in the hover state... so just:
.boxed:hover {
border-color:green;
}
Changing ONLY what you need changed when it's hovered. Everything else you declared on plain-old .boxed will still apply!
Finally it's usually not a good idea to be slopping in so much "DIV for nothing" instead of leveraging proper semantics, or to apply hover states to non-interactable tags. What is that content grammatically/structurally? Why is it receiving style? Are those going to be Anchors?
Don't start playing around with what the page looks like until you've written your complete and proper semantic markup first!
Marco Alka
Software Engineer, Technical Consultant & Mentor
Two things:
Example: