Предотвращение переполнения элементов скрытой области от щелчка

Я только что наткнулся на эту ситуацию, когда скрытая область переполняющего элемента по-прежнему затрагивается щелчками мыши или курсивом мыши.Предотвращение переполнения элементов скрытой области от щелчка

Я думал, что невидимый элемент или область не будут нацелены на события мыши, поэтому, чего я здесь не хватает?

Далее следует пример, когда это поведение появляется, нужно просто навести мышь за пределы круга, но рядом с зеленым квадратом, и вы заметите, что селектор hover действует.

#circle { 
 
    position:absolute; 
 
    height: 50%; 
 
    width: 28%; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: black; 
 
    color: white; 
 
    border-radius: 200px; 
 
    overflow: hidden; 
 
    
 
} 
 

 
#square { 
 
    height: 50%; 
 
    width: 50%; 
 
    transform: translate(-50%, -50%); 
 
    background: green; 
 
    cursor: pointer; 
 

 
} 
 

 
#square:hover { 
 
    background: yellow; 
 
}

<body> 
 
    <div id="circle"> 
 
    <div id="square"></div> 
 
    </div> 
 
    
 
    </div>

Добавлена 2016-12-05: Это странное поведение не происходит, как указано в комментариях в Firefox в отличие бывает для Chrome.

Cheers, utxeee.

источник

2016-12-04 utxeee

В каком браузере вы видите это? На Firefox 50.0.1 все работает как ожидается. – Rounin

Чтобы быть честным, я забыл упомянуть, что я также тестировал его на Firefox (48.0.2), и я подтверждаю, что он работает так, как ожидалось. Я использую Chrome (версия 49.0.2623.112) прямо сейчас. – utxeee

Это, очевидно, ошибка с движком рендеринга blink, хотя я не могу понять, откуда он. Я попробовал добавить 'pointer-events: none;' to '# circle' и' pointer-events: auto; 'to' # square', но это не имело никакого значения. – Rounin

Согласно W3 переливу спецификации: скрытая и границы радиуса шоу работы:

5,3. Угловое обрезание

Флажки ящика, но не его изображение границы, подрезаны к соответствующей кривой (как определено «фоном-клипом»). Другие эффекты , что клип к границе или кромке (например, «переполнение», кроме «видимый»), также должен быть привязан к кривой. Содержимое замененных элементов всегда обрезается до кривой края содержимого. Кроме того, область вне кривой пограничного края не принимает события мыши на имени элемента.

Но это не похоже на ошибку WebKit. В качестве одного из решений вы можете использовать clip-path property (в настоящее время поддерживаемый всеми основными браузерами, кроме IE):

clip-path: inset(0 0 0 0 round 200px); 
-webkit-clip-path: inset(0 0 0 0 round 200px);

источник

2016-12-07 09:31:39

Привет @Avadon, это поведение является ошибкой с компонентом Blink> HitTesting. В любом случае, спасибо за вашу помощь;) – utxeee

Предотвращение переполнения элементов скрытой области от щелчка

ответ

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