当前位置：文江博客话题详情

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

发布于 2024-11-01 02:04:45 字数 160 浏览 1 评论 0原文

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

Before

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

笙痞 2024-11-08 02:04:45

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

话虽这么说，请尝试一下：

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

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

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/

回复收藏 0 原文

你好，陌生人 2024-11-08 02:04:45

如果你想要一个仅 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="https://i.sstatic.net/kcW5L.png">
</body>
</html>

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="https://i.sstatic.net/kcW5L.png">
</body>
</html>

回复收藏 0 原文

疑心病 2024-11-08 02:04:45

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

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

In the style section of your page or in the css file:

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

回复收藏 0 原文

旧人哭 2024-11-08 02:04:45

试试这个：

<script>
function getBorder(obj, out){
    if(!out){
        obj.style.border = "blue solid 3px";
    }
    else {
        obj.style.border = "none";
    }
}

</script>

<img src='https://i.sstatic.net/kcW5L.png' onmouseover='getBorder(this);' 
                                      onmouseout='getBorder(this, true);'/>

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

更新< /strong>

没有内联 js，因为下面的注释：

<img src='https://i.sstatic.net/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/

try this:

<script>
function getBorder(obj, out){
    if(!out){
        obj.style.border = "blue solid 3px";
    }
    else {
        obj.style.border = "none";
    }
}

</script>

<img src='https://i.sstatic.net/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='https://i.sstatic.net/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/

回复收藏 0 原文

洛阳烟雨空心柳 2024-11-08 02:04:45

正如其他人提到的，您可以仅使用 CSS 来完成此操作。

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

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

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

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>

回复收藏 0 原文

~没有更多了~