Как получить круглое наведение на «круглый» div?

Наконец, я использовал javascript, чтобы он работал в Chrome.

$('#photo').mousemove(function (e) {
    var r = 175;

    var x = $('#photo').offset().left + r;
    var y = $('#photo').offset().top + r;

    var ex = e.pageX;
    var ey = e.pageY;

    var xx = (ex - x);
    var yy = (ey - y);

    if(xx*xx+yy*yy<r*r)
        $("#photo").css('border-color', 'red');
    else
        $("#photo").css('border-color', 'blue');
});

$('#photo').mouseleave(function (e) {
        $("#photo").css('border-color', 'blue');
});

Это то, что вы ищете

http://www.w3schools.com/tags/tag_map.asp

К несчастью, вы не можете создать круглый элемент, совместимый с crossbrowser. Существует (я думаю) только этот путь, с картой изображения.

<img src="http://freshwateraquaculture.net/wp-content/uploads/2014/02/300x300.gif" alt="" usemap="#Map" border="0" />
<map name="Map">
  <area shape="poly" coords="112,300,50,186,56,66,248,58,330,114,320,244,220,298" href="#">
</map>

Если вы проверите элемент с помощью инструмента "Разработчик", такого как инструмент разработчика Google Chrome "Firebug", вы увидите, что область имеет специальную форму и не является ректальной.

Мне было интересно, есть ли способ сделать div, что действует так, как будто это круто.

Ответ - нет.

Элементы HTML являются прямоугольными, хотя их можно настроить, чтобы появиться другие фигуры.

Есть, однако, другие трюки для достижения эффекта, которым вы пользуетесь, но это будет зависеть от того, что вы точно пытаетесь сделать.

@Ruddy представил сценарий в своем комментарии, который может быть одним ответом.

Рабочий скрипт

img {
width: 350px;
border : 2px solid red;
-webkit-border-radius: 175px;
-moz-border-radius: 175px;
border-radius: 175px;
height:350px;
}
img:hover {
border-color : blue;
}

Проверьте это демо jsFiddle

CSS

img {
    width: 350px;
    border : 2px solid red;
     /* Safari 3 to 4, iOS 1 to 3.2, Android 1.6 */
    -webkit-border-radius: 175px;

     /* Firefox 1 to 3.6 */
    -moz-border-radius: 175px;

    /* Opera 10, IE 9, Safari 5+, Chrome, Firefox 4+, iOS 4, Android 2.1+ */
    border-radius: 175px;
}

img:hover {
   border-color : blue;
}