Javascript 在我的图标上方绘制蓝色小正方形_Javascript_Html_Css_Hover

Javascript 在我的图标上方绘制蓝色小正方形

javascript html css

Javascript 在我的图标上方绘制蓝色小正方形,javascript,html,css,hover,Javascript,Html,Css,Hover,如何在我的鼠标图标概览上画一个蓝色的小正方形，如下所示试试这个： <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

如何在我的鼠标图标概览上画一个蓝色的小正方形，如下所示

试试这个：

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

这是上面提到的问题：

CSS要容易得多，尽管我甚至不能100%确定你要寻找的路线，因为问题很模糊，标签也很丰富

话虽如此，但不妨试一试：

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

以及强制性演示：

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

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

如果您想要一个仅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>


悬停边界{
边框：实心3px透明；
}
图像悬停边界：悬停{
边框颜色：蓝色；
}
将鼠标悬停在下面的图标上：

正如其他人所提到的，您可以仅使用CSS来实现这一点

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

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

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


$（文档）.ready（函数（）{
$（“#YourImg”）.mouseover（函数（）{
$（this.css（“边框”，“3px实体#0000FF”）；
});
});

当您将鼠标悬停在图像上时，是否会发生这种情况？您能否为我们澄清一下，您是否需要使用javascript来完成此操作，或者是否可以接受纯CSS解决方案？因为绝对不需要使用javascript来完成此操作。你可以用一个悬停选择器在CSS中实现，但这并不是一个好的解决方案。内联JS是一个坏主意，您的代码在使用onmouseover函数时尤其令人费解，但在onmouseout中使用原始代码。@p.campbell，这是一种糟糕的编码实践，这就是为什么“憎恨者”们如果OP不想看到js解决方案的话，@Tom OP就不会把

javascript

作为一个标签了…@Neal:我想你对这个标签读得太多了。我猜他给它加上javascript标签是因为他认为javascript可能有用，而不是因为他需要它。告诉你吧，我将对这个问题进行评论以澄清。IE现在支持这个吗？Afaik旧版本不支持锚元素以外的悬停。@除非是锚元素，否则悬停选择器不会在所有浏览器中工作tag@Shadow：据我所知，您只需使用DOCTYPE将其正确格式化即可工作（尽管我可能错了）.IE6及更低版本仅支持链接上的

：悬停

。@Tom:border是其他链接的缩写。我倾向于用短手来缩短文件，但这完全取决于你。您可以使用类似于

边框的东西：1px纯黑

然后返回并使用

边框颜色：蓝色且不覆盖宽度或样式。悬停选择器不会在所有浏览器中工作，除非它是一个锚点tag@Neal如果IE6用户在悬停时没有获得边框，这其实并不重要，它只是一种视觉效果。在IE7中，它工作得很好。OP特别要求一个JavaScript解决方案。“仅限ZOMG CSS”的投票人根本不知道OP的要求。没有必要使用javascript，因为这可以通过CSS在所有非过时浏览器上实现。OP没有要求javascript解决方案。他只是简单地加入了“javascript”标签。仅仅基于标签的存在而建议在不需要javascript的地方使用javascript是不正当的。@Tom:的确；你一定读过我的答案。它可以单独在CSS中完成。如果真的有一条路™ 要在HTML文档中设置元素的样式，这个问题只有一个答案。OP标记为JavaScript（是的，我夸大了；OP没有要求JS解决方案），这意味着JS是他们心目中问题/答案的一部分。没关系，你没有建议一个基于JS的答案。这是否意味着所有的JS都已退出qeustion？你似乎是这么想的——“变态”。为什么.css（）首先存在？这是一个适合这项工作的正确工具的问题。Javascript可以进行计算，而CSS不能；CSS相应地更简单、更快。Javascript是只通过计算才能找到正确样式的作业的正确工具，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>

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

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