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

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

已邀请:

5 个回复

CSS到目前为止要容易得多，尽管我什至不能100％地确定您要查找的路线，因为这个问题含糊不清并且标签很多。话虽这么说，但请旋转一下：

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

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

缮淳彼誊

如果您只需要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>

蔬谢窗港

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

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

届甸衬丝蚕

尝试这个：

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

距相镭

正如其他人所提到的，您只能使用CSS来做到这一点。对于任何想要jQuery解决方案的人：

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

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

要回复问题请先登录或注册

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

5 个回复

发起人

html

css

hover

javascript

问题状态

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

与内容相关的链接

5 个回复

发起人

html

css

hover

javascript

问题状态