Draw small blue square when over my icon_问答_开发者

Draw small blue square when over my icon

开发者 https://www.devze.com 2023-02-24 04:15 出处：网络

how to draw a small blue square on the overview of my icon for my mouse like 开发者_如何学Pythonthis

Draw small blue square when over my icon

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>