72

How can I make it act as if a line of div is anchor so when I hover on it it returns to red

CSS

.e
{
    width:90px;
    border-right:1px solid #222;
    text-align:center;
    float:left;
    padding-left:2px;
    cursor:pointer;


}
.f .e
{
    background-color:#F9EDBE;

}

HTML

<div>
    <div class="e" >Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>         
<div class="f">
    <div class="e">Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>   
<div>
    <div class="e">Company</div>
    <div class="e">Targetaaa</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>            
<div class="f"> 
    <div class="e">Company</div>
    <div class="e">Target</div>
    <div class="e" style="border-right:0px;">Person</div>
</div>
Ullas
  • 11,450
  • 4
  • 33
  • 50
Codette
  • 1,007
  • 2
  • 9
  • 18
  • do u want to make all sub div of f to have a background color when hover the e div is that what you want – mgraph Feb 13 '12 at 19:44

4 Answers4

139
.e:hover{
   background-color:#FF0000;
}
mgraph
  • 15,238
  • 4
  • 41
  • 75
35

if you want the color to change when you have simply add the :hover pseudo

div.e:hover {
    background-color:red;
}
Ibu
  • 42,752
  • 13
  • 76
  • 103
4

div hover background color change

Try like this:

.class_name:hover{
    background-color:#FF0000;
}
Adrita Sharma
  • 21,581
  • 10
  • 69
  • 79
Love Kumar
  • 1,056
  • 9
  • 10
0
<html>
<head>
<style>

.e {
    width:90px;
    border-right:1px solid #222;
    text-align:center;
    float:left;
    padding-left:2px;
    cursor:pointer;
}

e2:hover {
    background-color:red;
}

</style>
</head>
<body>

<div>
    <div class="e e2" >Company</div>
    <div class="e e2">Target</div>
    <div class="e e2" style="border-right:0px;">Person</div>
</div>

</body>
</html>
kamel
  • 1
  • 1