Имеется ли только CSS, можно ли запускать события hover и click под элементом? - PullRequest
Новая
       12

Имеется ли только CSS, можно ли запускать события hover и click под элементом?

1 голос
/ 20 апреля 2010

У меня есть полупрозрачный PNG в качестве фонового изображения для div, который я помещаю поверх некоторых ссылок.В результате ссылки не кликабельны.Есть ли способ, которым я могу парить и нажимать «через» div, который находится сверху?(Кстати, для позиционирования на переднем плане div я использую абсолютное позиционирование и z-index.)

Спасибо!Mike

Ответы [ 4 ]

1 голос
/ 27 мая 2011

эта проблема была решена здесь: Перейдите через DIV к базовым элементам

1 голос
/ 21 апреля 2010

Одним из вариантов будет использование :hover для перемещения z-index тегов ссылки вперед над PNG. 

div.container .links {
  z-index:0;
}

div.container .background {
  z-index:1;
}

div.container:hover .links {
  z-index:2;
}

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

1 голос
/ 21 апреля 2010

Во-первых, не должно быть никаких причин, по которым вы не могли бы поместить прозрачность переднего плана в саму ссылку и, таким образом, избежать проблемы, не вызывающей щелчка мышью. Давайте рассмотрим простой пример: 

<a href="#" class="layered_button"><img src="xxxx.jpg" alt="this link" /></a>

С новым слоем это становится: 

<a href="#" class="layered_button"><img src="xxxx.jpg" alt="this link" /><span class="button_overlay"></span></a>

(я добавил имена классов, чтобы помочь с иллюстрацией кодирования.)

Оверлей тогда будет стилизован и размещен абсолютно над исходным контентом ссылки. Наложенный фрагмент кода является встроенным и следует за фрагментом, который принадлежит фону, поэтому он, естественно, будет наслоен выше предыдущего кода без дополнительного кодирования.

Первое, что нужно сделать, это применить некоторые свойства форматирования к якору, чтобы он оставался встроенным, но принимал внутренние элементы с абсолютным позиционированием. (Команда -moz- поддерживает FireFox 2.) 

.layered_button {
    display: -moz-inline-block;
    display: inline-block;
}

Затем поместите свой декоративный полупрозрачный слой поверх кнопки. 

.button_overlay {
    position: absolute;
    left: 0px;
    top: 0px;
    width: XXpx;
    height: XXpx;
    background: url('xxxx.png') no-repeat 0px 0px;
    _background-image: none;
}

Свойство _background: является хаком для удаления полупрозрачного изображения с дисплея в версиях Internet Explorer 6, поскольку в браузерах поддерживается прозрачная поддержка изображений PNG. Обычное GIF-изображение также можно заменить, если для IE6 доступно альтернативное изображение.

Еще одна вещь, которую вы должны сделать, это убедиться, что весь контент в ссылке обеспечивает правильное взаимодействие курсора. (Некоторые браузеры, особенно некоторые версии Internet Explorer, не предоставляют ожидаемых изменений курсора для разметки внутри ссылок.) 

a:hover * {
    cursor: pointer;
}

Ваш второй вариант может заключаться в использовании библиотеки JavaScript для обеспечения обработки событий помимо базового HTML. Причина, по которой я предлагаю библиотеку JavaScript, состоит в том, что большинство браузеров по-прежнему не поддерживают должным образом методы CSS версии 2, в которых вы можете применять псевдокласс: hover к элементам DOM, кроме якорей. Лучший способ приблизиться к этой поддержке сейчас - это использовать библиотеки.

Мне особенно нравится jQuery, и добавить это свойство при наведении можно так же просто, как: 

$("#button_block .layer_object").hover( // div layer hover action
    function(){ }, // MouseOver
    function(){ } // MouseOut
).click( // div layer clicked: go to address from original link
    function(){ window.location = $("#button_block .layered_button").attr("href"); }
);

Кроме того, вы можете сделать клик на слое div, действуя как клик по ссылке с: 

$("#button_block .layer_object").click( // div click = anchor click
    function(){ $("#button_block .layered_button").click(); }
);

[Ссылка на #button_block предполагает, что два объекта находятся в одной и той же оболочке с идентификатором button_block, а .layer_object - это независимый элемент div, размещенный над ссылкой.]

1 голос
/ 20 апреля 2010

Почему бы не поместить изображение в фоновом режиме (вы знаете, как свойство background-image, которое они создали по этой причине)? Единственный способ сделать это с помощью некоторых высокоразвитых скриптов, которые замедляют вашу страницу, не стоит того. Вы не должны размещать изображение над своими ссылками.

...