在我的图标上画一个蓝色的小方块答案

【问题标题】：Draw small blue square when over my icon在我的图标上画一个蓝色的小方块
【发布时间】：2011-04-13 23:58:13
【问题描述】：

如何在我的鼠标图标的概述上画一个蓝色的小方块，像这样

【问题讨论】：

当您将鼠标悬停在图像上时应该会发生这种情况吗？
您能否向我们澄清一下您是否需要在 javascript 中完成此操作，或者是否可以接受纯 CSS 解决方案？

【解决方案1】：

CSS 到目前为止要容易得多，尽管我什至不能 100% 确定您正在寻找的路线，因为问题含糊不清且标签很多。

话虽如此，试一试：

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

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

【讨论】：

IE 现在支持这个吗？ Afaik 旧版本不支持除锚元素以外的悬停。
@Brad 一个悬停选择器不会在所有浏览器中工作，除非它是一个锚标签
@Shadow：据我所知，您只需要使用 DOCTYPE 正确格式化它就可以工作（尽管我可能错了）。
IE6 及更低版本仅支持链接上的:hover。
@Tom：border 是其他人的简写。我倾向于使用简写来保持文件更短，但这完全取决于你。你可以使用border: 1px solid black; 之类的东西，然后回来使用border-color: blue;，而不是覆盖宽度或样式。

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

悬停选择器不会在所有浏览器中工作，除非它是一个锚标签
@Neal 如果 IE6 用户在悬停时没有边框，那应该没那么重要，这只是视觉上的事情。在 IE7 中运行良好。

【解决方案4】：

试试这个：

<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，因为下面的cmets：

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

【讨论】：

投反对票，因为绝对没有必要用 javascript 来做这件事。您可以在 CSS 中使用悬停选择器来实现。
这并不是一个好的解决方案。内联 JS 是个坏主意，而且您的代码在使用 onmouseover 函数但使用 onmouseout 原始代码时尤其令人困惑。
@p.campbell，这是一种糟糕的编码习惯，这就是“仇恨者”投反对票的原因。
@Tom 如果 OP 不想看到 js 解决方案，则 OP 不会将 javascript 作为标签...
@Neal：我认为您对该标签的阅读过多。我认为他将其标记为 javascript 是因为他认为 javascript 可能有用，而不是因为他需要它。告诉你什么，我会评论这个问题来澄清。

【解决方案5】：

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

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

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

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

【讨论】：

OP 专门要求提供 JavaScript 解决方案。 'ZOMG CSS-only' downvoters 根本不知道 OP 的要求。
没有必要使用 javascript，因为这可以在 CSS 中完成，它适用于所有非过时的浏览器。
OP 没有要求使用 javascript 解决方案。他只是简单地包含了“javascript”标签。仅仅基于标签的存在就建议在不需要的地方使用 javascript 是不正当的。
@Tom：确实；你一定读过我的回答。它可以单独在 CSS 中完成。如果有 The One True Way™ 可以为 HTML 文档中的元素设置样式，那么这个问题只有一个答案。 OP 标记为 JavaScript，（是的，我夸大了；OP 没有要求提供 JS 解决方案）这意味着 JS 是他们心中问题/答案的一部分。很好，您没有建议基于 JS 的答案。这是否意味着所有的 JS 都不存在了？你似乎是这么想的——“反常”。为什么.css()首先存在？
这是一个适合工作的工具的问题。 Javascript 可以做计算，而 CSS 做不到； CSS 相应地更简单、更快。对于只能通过计算找到正确样式的作业，Javascript 是正确的工具，而对于可以通过应用它提供的规则类型找到样式的作业，CSS 是正确的工具。这份工作属于后者。