Радиус рамки рамки и курсор

Радиус рамки CSS влияет на рендеринг кнопок (я вижу круглую форму), но не влияет на то, как он взаимодействует с пользователем (я все еще могу нажать кнопку за пределами ее границы). Как его исправить?Радиус рамки рамки и курсор

Я вижу поведение в Chrome.

button 
{ 
    cursor: pointer; 
    outline: none; 
    background-size: 100% 100%; 
    background-color: red; /*transparent;*/ /* It's actually red and ROUND. */ 
    background-position: center center; 
    background-repeat: no-repeat; 
    border: 0px; 

    -webkit-border-top-left-radius: 73px; 
    -webkit-border-top-right-radius: 73px; 
    -webkit-border-bottom-left-radius: 73px; 
    -webkit-border-bottom-right-radius: 73px; 
    width: 146px; height: 146px; 

    background-image: url('leftarrow.png'); 
}

This effect is unwanted.

С уважением,

источник

2012-03-18 noober

Я пытаюсь избежать указателя курсора в углах. Приложит скриншот. – noober

как вы?

Это не «сломан», так как так оно и должно работать, поэтому вы не можете его исправить, все элементы визуализируются как прямоугольники в браузере (если вы проверите круглую кнопку, вы увидите ее охватывает прямоугольная область)

вы можете либо (как @Greg указывал) использовать <area> тег, или вы можете использовать JavaScript, чтобы сделать следующее:

Если за пределами круга координат, показать очередную мышь значок; Если внутри, покажите указатель
Если за пределами круговых коордов вернуть false в методе onclick; Если внутри, верните true.

Надеюсь, это поможет, сообщите мне, если вам нужна помощь с кодом JS.

Cheers!

источник

2012-03-18 18:11:15 fsodano

Хорошо, но как насчет хорошего обходного пути? Мне не нравится и обработка событий mousemove. – noober

Единственное обходное решение, которое я могу придумать, не включает в себя эти решения, состоит в том, чтобы создать достаточное количество элементов, чтобы покрыть желаемую «непривлекательную» область (которая соответствует области, не включенной в круг), но это даже хуже, чем добавление тег или делать это с помощью JavaScript, на мой взгляд. Если вы хотите избежать JS, - это путь, как предложил @Greg. – fsodano

Кстати, решение SVG, предложенное ниже для @Grzegorz Łuszczek, также имеет силу, но старые браузеры могут его не поддерживать (выполнение быстрого теста, последние IE, FF и Chrome поддерживают его, но IE8 и ниже) – fsodano

Вы пробовали это вместо этого. Затем используйте событие onclick.

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

источник

2012-03-18 18:05:58 Greg

Я думаю, что единственным решением является использование встроенного SVG и тега circle.

Я предполагаю, что браузер отображает div как прямоугольник, и не заботится о радиусе границы (потому что этот угол по-прежнему принадлежит прямоугольнику).

источник

2012-03-18 18:11:42

Радиус рамки рамки и курсор

ответ

Смежные вопросы