Нарисуйте маленький синий квадрат, когда над моей иконой - PullRequest
Новая
       1

Нарисуйте маленький синий квадрат, когда над моей иконой

0 голосов
/ 13 апреля 2011

Как нарисовать маленький синий квадрат на обзоре моей иконки для моей мыши, как это

Before

after

Ответы [ 5 ]

7 голосов
/ 13 апреля 2011

CSS намного проще, хотя я даже не уверен на 100%, какой маршрут вы ищете, так как вопрос расплывчат и теги многочисленны.

Как говорится, вихрь: 

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

И обязательная демоверсия: http://jsfiddle.net/xCU74/

2 голосов
/ 13 апреля 2011

Если вы хотите решение только для 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>
1 голос
/ 13 апреля 2011

В разделе стиля вашей страницы или в файле CSS: 

.square:hover
{
    border-style:solid;
    border-width:3px;
    border-color:blue;
}
1 голос
/ 13 апреля 2011

попробуйте это: 

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

ЯШ: 

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/

0 голосов
/ 13 апреля 2011

Как уже упоминалось, вы можете сделать это, используя только CSS.

Для тех, кто хочет получить решение jQuery: 

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

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