I have html:
<div>
<div id='icon_zoom_in' class='icon'>+</div>
<div id='icon_zoom_out' class='icon'>-</div>
</div>
And I add CSS:
.icon{
color: white;
font-size: 100px;
background-color: black;
opacity: 0.7;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
width: 70px;
height: 70px;
text-align: center;
line-height: 50px;
cursor: pointer;
}
The result is nice(ignore the font, I installed a chrome extension):
But when I add click event on there "buttons", strange things happen:
var $ = function(id) {
return document.getElementById(id);
}
$("icon_zoom_in").addEventListener("click", function() {
console.log("zoom in");
}, false);
$("icon_zoom_out").addEventListener("click", function() {
console.log("zoom out");
}, false);
When I click the "+" button, I got zoom out
! I have to click the outter space of it to get zoom in
.
jsfiddle: http://jsfiddle.net/wong2/w2dRB/
Super simple: in Chrome the text is overflowing. Actually when you click the plus you are clicking the minus because of this. Use overflow: hidden;
and the plus and minus will stick inside the buttons. Here (JSFiddle) you can test the correct behaviour.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.