Marro:
Я новичок в HTML и CSS, и я стараюсь, чтобы это (складочном) показать изображение на текст парении.
Я видел много примеров, когда это работает, когда изображение является потомком DIV, но я хочу, чтобы получить его на работу между дивами, в идеале с идентификаторами элементов. Я считаю, что мои CSS селекторы правильно, я не уверен, что я пытаюсь сделать, это недопустимо. Любая помощь приветствуется, я также открыт для решения JavaScript.
Изменить: Я ищу решение, где эффект парения работает только на «важный текст» внутри тега.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="textcontainer">
<p> <a id="text1">Important text</a> other text etc </p>
</div>
<div class="gallerycontainer">
<img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/>
</div>
</body>
<style>
#fig1 {
opacity: 0.0;
-webkit-transition: all 500ms ease-in-out;
-moz-transition: all 500ms ease-in-out;
-ms-transition: all 500ms ease-in-out;
-o-transition: all 500ms ease-in-out;
transition: all 500ms ease-in-out;
}
#text1:hover + #fig1 {
/* visibility: hidden;
display: none; */
opacity: 1.0;
}
</style>
</html>
Банзай:
Вот решение. Вы должны следовать правильным селекторам СЦЕПЛЕНИЯ
#fig1 {
transition: all 500ms ease-in-out;
}
.textcontainer + .gallerycontainer #fig1 {
opacity: 0;
}
.textcontainer:hover + .gallerycontainer #fig1 {
opacity: 1;
}<div class="textcontainer">
<p> <a id="text1">Important text</a> other text etc </p>
</div>
<div class="gallerycontainer">
<img id="fig1" src="https://image.shutterstock.com/image-photo/black-male-hand-measuring-invisible-260nw-1070365622.jpg"/>
</div>