Может кто-нибудь сказать мне, почему мои ссылки не кликабельны, когда у меня есть div под ним?

Question

Может кто-нибудь сказать мне, почему мои ссылки не кликабельны, когда у меня есть div под ним?

0

Я создаю виджет для своего сайта, который отображает автора и их социальные ссылки. Он работал нормально, пока я не добавил размытый фон div в миксе. Что-то об этом не позволяет мне больше нажимать ссылки. Я попытался добавить значения z-index, но это, похоже, не помогает. Посмотрите мою скрипку, чтобы увидеть мою проблему. Ниже приведен класс, о котором идет речь...

.social_artist_image_wrapper {
    position:absolute;
    height:126px;
    width:580px;
    background-size:cover;
    opacity:0.3;

    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);  
}

jas7457 17 апр. 2014, в 21:56

Источник

Теги:

javascript

jquery

html

css

4 ответа

1

Измените свой CSS так:

.social_artist_text_wrapper a {
    color:#bbb;
    text-shadow:0px 0px 5px #000;   
    position: relative;
    z-index: 2;
}

Как говорили другие, это потому, что вы абсолютно позиционировали фоновое изображение. Поэтому, чтобы заставить другие элементы визуализироваться перед ним, вам нужно установить свойство z-index, которое работает только в том случае, если свойство position является чем-то иным, чем static.

Обновлена скрипка.

trentmwillis 17 апр. 2014, в 17:10

1

Я думаю, что это потому, что ваш div не находится под ним, он находится на вершине его. Это потому, что вы используете position: absolute. Вероятно, вы можете достичь того, что ищете, с position:relative.

PressingOnAlways 17 апр. 2014, в 16:39

0

Я нашел проблему. Я только что сделал position:relative .social_artist_text_wrapper и это исправило это.
jas7457 17 апр. 2014, в 19:15
0

Отлично, сэкономьте мне время на скрипке. :)
PressingOnAlways 17 апр. 2014, в 19:18

0

Добавьте этот стиль в класс.social_artist_image_wrapper.

pointer-events:none;

Недостаток поддержки IE, поэтому ответы на позиционирование выше могут лучше соответствовать вашим потребностям (если вам не нужно поддерживать IE8 или IE9)

JRulle 17 апр. 2014, в 18:49

Ещё вопросы

Я нашел проблему. Я только что сделал position:relative .social_artist_text_wrapper и это исправило это.
Отлично, сэкономьте мне время на скрипке. :)

Niet the Dark Absol · Accepted Answer · 2014-04-17T18-03-00.000Z

Поскольку элемент с position:absolute (или ничего, кроме static, помещается поверх position:static элементы, если они не имеют отрицательного z-index.

Попробуйте поставить position:relative по вашей внутренней области плюс полупрозрачный цвет фона: демонстрационная версия