Draw small blue square when over my icon
how to draw a small blue square on the overview of my icon for my mouse like 开发者_如何学Pythonthis
CSS is by far easier, though I'm not even 100% sure the route you're looking for since the question is vague and the tags are plentiful.
That being said, give this a whirl:
img:hover { border: 5px solid blue; }
And the obligatory demo: http://jsfiddle.net/xCU74/
If you want a CSS-only solution, this will work:
<html>
<style type="text/css">
img.hoverborder {
border: solid 3px transparent;
}
img.hoverborder:hover {
border-color: blue;
}
</style>
<body>
<p>Hover over the icon below:</p>
<img class="hoverborder" src="http://i.stack.imgur.com/kcW5L.png">
</body>
</html>
In the style section of your page or in the css file:
.square:hover
{
border-style:solid;
border-width:3px;
border-color:blue;
}
try this:
<script>
function getBorder(obj, out){
if(!out){
obj.style.border = "blue solid 3px";
}
else {
obj.style.border = "none";
}
}
</script>
<img src='http://i.stack.imgur.com/kcW5L.png' onmouseover='getBorder(this);'
onmouseout='getBorder(this, true);'/>
fiddle: http://jsfiddle.net/maniator/uEQqB/
update
without inline js, because of comments below:
<img src='http://i.stack.imgur.com/kcW5L.png' id='hoverImg'/>
js:
var img = document.getElementById('hoverImg')
img.addEventListener('mouseover',function () {
this.style.border = "blue solid 3px"
},false)
img.addEventListener('mouseout',function () {
this.style.border = "none"
},false)
and here is the fiddle for above: http://jsfiddle.net/maniator/vy6QZ/
As others have mentioned, you can do this using only CSS.
For anyone wanting a jQuery solution:
<script>
$(document).ready(function(){
$("#YourImg").mouseover(function () {
$(this).css("border","3px solid #0000FF");
});
});
</script>
加载中,请稍侯......
精彩评论