CSS эффекты наведения работают только с абсолютным позиционированием?

Question

CSS эффекты наведения работают только с абсолютным позиционированием?

0

Я пытаюсь сделать текст поверх изображения, когда изображение зависнет.

Это, как правило, простой процесс, однако, по-видимому: hover не работает, если первый div (например)

first.div:hover second.div {

(в моем случае изображение) использует относительное позиционирование вместо абсолютного.

На этой странице много изображений, и они настраиваются как таблицы через CSS с такими атрибутами, как display: table; поэтому я не думаю, что у меня есть возможность переключиться на абсолютное позиционирование. Я знаю, что CSS-таблицы обычно не оправдываются, но я абсолютно должен это делать.

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

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

В соответствии с запросом здесь приведен код:

HTML

<div class="cell"><img class="box" src="image1.jpg"><div id="text">Text text text</div></div>

CSS

.cell { position:relative; display:table-cell; background-color:black; width:700px; height:auto; } .cell { position:relative; display:table-cell; background-color:black; width:700px; height:auto; } #text { display:table; position:absolute; z-index:999; color:#fff; text-align:center; width:100%; top:48%; left:0; } #text { display:table; position:absolute; z-index:999; color:#fff; text-align:center; width:100%; top:48%; left:0; } направо #text { display:table; position:absolute; z-index:999; color:#fff; text-align:center; width:100%; top:48%; left:0; }

img { max-height:600px; max-width:600px; height:auto; width:100%; filter: url(filters.svg#grayscale);/* Firefox 3.5+ */filter: gray;/* IE6-9 * / -webkit-filter: grayscale(1);/* Google Chrome, Safari 6+ & Opera 15+ */opacity:0.4; z-index:2; }

img:hover { filter: none; -webkit-filter: grayscale(0); opacity:1.0; }

Я не уверен в том, что вызывает это, поэтому я включил намного больше, чем необходимо... Я немного новичок в кодировании, так что cell.div:hover #text { opacity:1;}, но я не могу получить cell.div:hover #text { opacity:1;} работать. Я где-то читал, что это потому, что эффекты зависания не работают с относительно позиционируемыми div...

little tiny man 09 янв. 2014, в 12:32

Источник

3

Не могли бы вы показать какой-нибудь код?
Jonathan 09 янв. 2014, в 10:52
0

Z-индекс работает только в одном и том же стиле позиционирования - поэтому абсолютно позиционированные элементы учитывают только z-индекс друг друга и игнорируют элементы положения релятивли, и наоборот.
Sinister Beard 09 янв. 2014, в 10:55
0

@BFDatabaseAdmin: не могли бы вы предоставить ссылку на источник для этого заявления? или, может быть, скрипка, чтобы продемонстрировать это?
Abhitalks 09 янв. 2014, в 10:59
0

Я не читаю все это ... создать скрипку .... jsfiddle.net
Anup 09 янв. 2014, в 11:09
0

@BFDatabaseAdmin не уверен, что это правда, jsfiddle.net/57gZG . Что касается вопроса, покажите нам код, который у вас есть, мы не сможем вам помочь, если не будем знать, что вы делаете.
MLeFevre 09 янв. 2014, в 11:11
0

@MLeFevre Я вполне могу ошибаться. Позвольте мне перефразировать: у меня всегда были проблемы с получением z-index, когда элементы располагались по-разному, и это также, кажется, происходит с OP. По всей вероятности, я делаю с ними аналогичную ошибку.
Sinister Beard 09 янв. 2014, в 11:55
0

@BFDatabaseAdmin то, что вы сказали о позиционировании, не соответствует действительности. Прочитайте спецификацию z-index, прежде чем делать подобные заявления. Элемент (и его родители) должен иметь явно определенную позицию (например, не static ), но в прошлом он основан на стековом контексте на этом уровне DOM.
Ennui 09 янв. 2014, в 14:08
0

@BFDatabaseAdmin также, если BF обозначает Battlefield High Five! Я основал и управлял одним из крупных фан-сайтов BF.
Ennui 09 янв. 2014, в 14:09
0

@ Ennui - Да, мой плохой. Однако я оставлю там свой ошибочный комментарий, чтобы все последующие комментарии имели смысл!
Sinister Beard 09 янв. 2014, в 14:10
0

Эй, я бросил код там. Я избегал делать это, потому что его много, и я не уверен, что именно вызывает его, поэтому я извиняюсь за все лишние вещи.
little tiny man 13 янв. 2014, в 17:52

Показать ещё 8 комментариев

Теги:

html

css

css3

3 ответа

1

Я не понимаю, какова твоя проблема. И если вам ясно, что у вас проблема только в непрозрачности, вы можете использовать css, как показано ниже.

first.div:hover second.div {
cursor: pointer;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: alpha(opacity=75);
-khtml-opacity: 0.75;
-moz-opacity: 0.75;
opacity: 0.75; }

Если это не сработает для вас, то, пожалуйста, поделитесь своим кодом или живой ссылкой, а затем объясните вам.

user2784458 09 янв. 2014, в 12:28

0

вы можете просто использовать opacity для достижения этого. Убедитесь, что вы нацеливаете pic на зависание. Посмотрите эту скрипку.

http://jsfiddle.net/Davidicus/69ZTN/

Davidicus 09 янв. 2014, в 14:49

Ещё вопросы

Не могли бы вы показать какой-нибудь код?
Z-индекс работает только в одном и том же стиле позиционирования - поэтому абсолютно позиционированные элементы учитывают только z-индекс друг друга и игнорируют элементы положения релятивли, и наоборот.
@BFDatabaseAdmin: не могли бы вы предоставить ссылку на источник для этого заявления? или, может быть, скрипка, чтобы продемонстрировать это?
Я не читаю все это ... создать скрипку .... jsfiddle.net
@BFDatabaseAdmin не уверен, что это правда, jsfiddle.net/57gZG . Что касается вопроса, покажите нам код, который у вас есть, мы не сможем вам помочь, если не будем знать, что вы делаете.
@MLeFevre Я вполне могу ошибаться. Позвольте мне перефразировать: у меня всегда были проблемы с получением z-index, когда элементы располагались по-разному, и это также, кажется, происходит с OP. По всей вероятности, я делаю с ними аналогичную ошибку.
@BFDatabaseAdmin то, что вы сказали о позиционировании, не соответствует действительности. Прочитайте спецификацию z-index, прежде чем делать подобные заявления. Элемент (и его родители) должен иметь явно определенную позицию (например, не static ), но в прошлом он основан на стековом контексте на этом уровне DOM.
@BFDatabaseAdmin также, если BF обозначает Battlefield High Five! Я основал и управлял одним из крупных фан-сайтов BF.
@ Ennui - Да, мой плохой. Однако я оставлю там свой ошибочный комментарий, чтобы все последующие комментарии имели смысл!
Эй, я бросил код там. Я избегал делать это, потому что его много, и я не уверен, что именно вызывает его, поэтому я извиняюсь за все лишние вещи.

little tiny man · Accepted Answer · 2014-01-13T16-31-00.000Z

Ничего себе, буквально через 30 секунд после того, как я потратил время, чтобы опубликовать весь мой код, я нашел решение. Я использовал div.cell:hover #text { opacity:1; } div.cell:hover #text { opacity:1; } и все сработало. Не уверен, что я делал неправильно, это была поздняя ночь и, вероятно, пыталась сделать что-то немое, как img.box:hover #text commands. В любом случае игнорируйте этот вопрос ребята, и спасибо