问题描述
|
如何在我的鼠标图标概览上绘制一个蓝色小方块,如下所示
解决方法
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>