When click on tools div button (:active) works fine in Firefox but not in IE
This code works fine in Firefox but not in IE, please give a solution only using CSS (No jquery or javascript), the problem begins when you click on the span inside the DIV!
<style type="text/css">
.tools {
cursor:pointer;
}
.tools {
background-color:#aaa;
padding:5px;
}
.tools span {
background-color:green;
color:white;
}
.tools:hover {
background-color:#ccc;
}
.tools:hover span {
background-color:red;
}
.tools:active {
background-color:#333;
color:#fff;
}
.tools:active span {
background-color:blue;
}
</style>
</head>
<body onselectstar开发者_如何学Ct="return false;" >
<div class="tools" style="width:100px; height:20px;">
<span>
Hello world...
</span>
</div>
</body>
It will work if you use tag <label> instead of <a>, or if you put one inside another.
You shouldn't make div or any other html element to behave as another element. There is no reason why you shouldn'y use the "a" element instead. You just need to specify (in css) "display:block" in order for you to design it as you would with a div.
<style type="text/css">
.tools {
background-color:#aaa;
padding:5px;
display:block;
}
.tools span {
background-color:green;
color:white;
}
.tools:hover {
background-color:#ccc;
}
.tools:hover span {
background-color:red;
}
.tools:active {
background-color:#333;
color:#fff;
}
.tools:active span {
background-color:blue;
}
</style>
</head>
<body onselectstart="return false;" >
<a class="tools" style="width:100px; height:20px;">
<span>
Hello world...
</span>
</a>
</body>
加载中,请稍侯......
精彩评论