Подтвердить что ты не робот

Сделать оверлейным фоном

Есть ли способ, в CSS, я могу сделать элемент доступным по клику. У меня есть absolute ly <div>, охватывающий ссылку. Я хотел бы иметь возможность щелкнуть ссылку с помощью наложения <div>. Наложение имеет преимущественно прозрачный фон, а ссылка не имеет покрывающих пикселей.

Я пробовал background: url('...') transparent, но безрезультатно.

Здесь - это JSFiddle, демонстрирующий мою проблему. Ссылка может быть нажата в IE8, но не в FireFox. То, что я хочу сделать, это сделать тикер изображения в div #underlay. Оверлей - это то, что у меня есть фон с градиентом от сплошного до прозрачного снизу и сверху, поэтому я могу сделать изображения "прокрутки в ничто", без выцветания всего изображения сразу, если это имеет смысл (если у кого-то есть телефон Android, попробуйте прокрутить свои заметки и посмотреть верхнюю/нижнюю часть экрана - заметки исчезнут в ничто).

4b9b3361

ОТВЕТЫ

Ответ 1

Я исправил вашу проблему, добавив pointer-events: none; в абсолютный блок.

body {
  margin: 0;
  padding-left: 10px;
  font: 20px Arial, sans-serif;
  line-height: 30px;
}
a:hover {
  color: red;
}
#overlay-blocking,
#overlay-passing{
  position: absolute;
  height: 30px;
  width: 10em;
  left: 0;
}

#overlay-blocking {
  top: 30px;
  background: rgba(0,100,0, .2);    
  pointer-events: none;
}
#overlay-passing {
  top: 0;
  background: rgba(100,0,0, .2);    
}
<a href="#">Link blocked</a><br>
<a href="#" title="hoverable">Link available</a><br>
<a href="#" title="hoverable">Link available</a><br>    

<div id="overlay-blocking"></div>
<div id="overlay-passing"></div>

Ответ 2

Я не думаю, что это возможно, потому что изображение по-прежнему является полным ящиком. Но вы пробовали эти Картинки изображений? Похоже, что вы хотите.

ПРОЧАЯ ОПЦИЯ

Вы также можете отделить свое изображение от 2, и убедитесь, что ваши поля не накладываются на вашу ссылку, конечно.