Question

如何在我的鼠标图标概览上绘制一个小蓝色方块，如下所示

Before

after

Answer 1

CSS更容易，但我甚至不能100％确定您正在寻找的路线，因为问题很模糊且标签很丰富。

话虽如此，请给它一个旋转：

img:hover { border: 5px solid blue; }

强制性演示：http://jsfiddle.net/xCU74/

Answer 2

如果你想要一个只有CSS的解决方案，这将有效：

<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>

Answer 3

试试这个：

<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);'/>

小提琴：http://jsfiddle.net/maniator/uEQqB/

<强>更新

没有内联js，因为下面的评论：

<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)

以上是上面的小提琴：http://jsfiddle.net/maniator/vy6QZ/

Answer 4

在您网页的样式部分或css文件中：

.square:hover
{
    border-style:solid;
    border-width:3px;
    border-color:blue;
}

Answer 5

正如其他人所提到的，你只能使用CSS来做到这一点。

对于任何想要jQuery解决方案的人：

 <script>  
  $(document).ready(function(){

    $("#YourImg").mouseover(function () {
       $(this).css("border","3px solid #0000FF");  
    });
   });
 </script>

在我的图标上方绘制小蓝色方块

5 个答案: