Opacity не работает hover

CSS: hover not working due to opacity

I’m having a strangs CSS problem.

Below is a very simple code sample, demonstrating the problem.

I have a div A, floating over another div B, which has an opacity of 0.5. And I want to add a CSS hover rule to the floating div. But for some reason I can’t.

Whether I float right or left, doesn’t matter.

But when I change the opacity to 1, the hover rule works all of a sudden.

Can anybody explain this behaviour?

I can «fix» the problem by wrapping the content of the blocker div in a span, but it feels like I shouldn’t have to.

Here’s a jsFiddle, demonstrating the problem: http://jsfiddle.net/ed82z/1/

3 Answers 3

Simply put — it is «above» it if the opacity has a less than 1 value.

By setting opacity to a value less than one, it is layered differently according to the specification since it receives a new stacking context and is positioned beneath the element.

The root element forms the root stacking context. Other stacking contexts are generated by any positioned element (including relatively positioned elements) having a computed value of ‘z-index’ other than ‘auto’. Stacking contexts are not necessarily related to containing blocks. In future levels of CSS, other properties may introduce stacking contexts, for example ‘opacity’ [CSS3COLOR].

Since an element with opacity less than 1 is composited from a single offscreen image, content outside of it cannot be layered in z-order between pieces of content inside of it. For the same reason, implementations must create a new stacking context for any element with opacity less than 1. If an element with opacity less than 1 is not positioned, implementations must paint the layer it creates, within its parent stacking context, at the same stacking order that would be used if it were a positioned element with ‘z-index: 0’ and ‘opacity: 1’. If an element with opacity less than 1 is positioned, the ‘z-index’ property applies as described in [CSS21], except that ‘auto’ is treated as ‘0’ since a new stacking context is always created. See section 9.9 and Appendix E of [CSS21] for more information on stacking contexts. The rules in this paragraph do not apply to SVG elements, since SVG has its own rendering model ([SVG11], Chapter 3).

How to fix it:

You can set pointer-events to none , see this fiddle.

Источник

Не работает свойство opacity

Не меняет значение. Не знаю в чем проблема. Помогите

Комментарий модератора

Код размещаем не в виде картинок а на форуме! Плюс ко всему и сами картинки следует размещать на форуме, а не ссылками!

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Свойство opacity
Доброго времени суток. Занялся версткой небольшого сайта и решил сделать один блок.

Как не наследовать свойство opacity?
Есть div с свойством opacity: 0.1; В этот div вложен другой div. Мне нужно, чтобы внешний div был.

не правельно работает opacity
Есть див ктоторый дожен быть полупрозрачным, задаю ему opacity:0.75; filter: alpha(Opacity=75);.

на это свойство стоит скрипт. При клике появлялось

Добавлено через 10 минут
нашел в чем проблема) Свойство opacity было прописано в скрипте) Старость не радостью

Спасибо всем, кто чем-то помог)

«Form1.Opacity = 55» не работает
Как снизить Form1.Opacity на 50% когда ставим галочку на Checkbox? private void.

Не работает свойство
При передаче string параметра на другую форму передается пустое значение (не null, а «»). Идея.

Не работает свойство радиокнопки
люди подскажите почемуто в команде Option25.Value бейсик пишет что какието проблемы с .Value

Источник

Не работает hover

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

Помощь в написании контрольных, курсовых и дипломных работ здесь.

Не работает hover
Подскажите пожалуйста почему не работает hover. Код html:

:hover не работает
Темой все сказано)) Нужна помощь.

Не работает .hover
Имеется 9 блоков, и обработчик наведения курсора на блоки .hover, который выводит квадрат в центре.

Не работает hover
Проблема в том что hover и last-child не работают, самблайм их даже не подсвечивает. Помогите.

Fedor92, так я тоже пробовала. Не работает к сожалению.

Добавлено через 3 минуты
В итоге убрала я div overlay совсем, и сделала div middle на весь родительский div. Для middle прописала background и hover и почему-то заработало.

Hover не работает
Делаю меню. Оно состоит из списка и ссылки в нем. И сделал смену цвета фона в этом меню.

Не работает hover в IE
сайт hover в левом меню не работает в ие (любых версий). Условные комментарии спасут мир?)

Hover не работает
Навожу а стрелка(картинка) не появляется

Источник

css opacity on hover of div

I am new to CSS. I just want a div over another div on hover and its transparency should increase. I have done some thing like that

and css file is

I want to increase transparency of div with id left on hover

3 Answers 3

I’m afraid hovering of div elements is not supported in our favourite browser (IE6), but if you’re willing to drop support, the following code should work:

I haven’t looked closely at your code but one thing:

is most likely not what you want. You want

it means, the element with the ID left when the mouse hovers over it. Maybe that already helps solve it.

If you want transparency on old browsers use a transparent .png with a light grey or whatever and apply it as a div on top of your other div. Make sure you use position:fixed so it floats together with the scroll, else as you scroll you end up underneath it.

Not the answer you’re looking for? Browse other questions tagged css hover or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.15.40479

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

Как задать эффект hover в CSS для текста с opacity 1, если он с opacity 0.9?

Есть блок. В нём картинка задана background. Далее блок, который срабатывает при наведении мышки (hover-block). В этом блоке есть ссылка с текстом (h1, span). Для hover-block изначально указан opacity: 0. При наведении opacity: 0.9. Но и всё содержимое блока тоже с такой прозрачностью. А я хочу, чтобы текст внутри блока hover-block был opacity: 1 при этом эффект hover с opacity: 0.9. Я игрался долго с этими блоками, менял местами, ничего не получилось. Как добиться этого результата?

И попутный вопрос, Как реализовать данный эффект без использования background в CSS, а только в HTML через img src=»» alt=»»?

• Вопрос задан более двух лет назад
• 386 просмотров

Задавайте фоновый цвет в формате rgba, вместо прозрачности всего блока.
https://jsfiddle.net/7xjgb0w1/

p.s. у вас дикая вложенность, обычно 2х уровней достаточно.

это жесть, используйте классы
вряд ли существует main, который не лежит в body и т.д.

Спасибо. Как оказалось у меня не хватало rgba 🙂

Я стили делал через препроцессор SCSS и указывал каждую вложенность. Только учусь)

Артур,
Вот это body main .footer .slide .img-1 .hover-block a h1
с большой долей вероятности заменяется на .slide h1

Препроцессоры не повод городить помойку в CSS.

Объясню: браузер читает селектор справа налево. Т.е. вначале он найдет ВСЕ h1 на странице, затем проверит есть ли у КАЖДОГО из них родитель ссылка, потом лежат ли они в блоке с классом .hover-block и т.д. по всей цепочке. Зачем ему такое развлечение и столько проверок?

Источник