CSS hover image show div

Я попытался добавить +, но div .shopbar_image_over не отображается.CSS hover image show div

.shopbar_image_container img { 
 
    height: 190px; 
 
    width: 190px; 
 
    cursor: pointer; 
 
} 
 
.shopbar_image_over { 
 
    display: none; 
 
    height: 190px; 
 
    width: 190px; 
 
    opacity: 0.2; 
 
    background: #444; 
 
    position: absolute; 
 
    cursor: pointer; 
 
} 
 
.shopbar_image_container img:hover + .shopbar_image_over { 
 
    display: block; 
 
}

<div class="shopbar_image_container"> 
 
    <div class="shopbar_image_over"></div> 
 
    <img src="img/t.jpg" /> 
 
</div>

источник

2015-01-27 Im Happy

'+' работает на соседнем следующем собрата в DOM, а не предыдущий. Вы должны изменить свой HTML или использовать другие способы. – Harry

Вы не можете переместить назад дерево DOM с помощью CSS (сравните его с регулярным выражением, каким-то образом). –

соседнему Sibling Selector (+) работает на соседнем следующем собрата в DOM, а не предыдущий. В этом случае div, который вы хотите показывать при зависании на img, находится выше или до img в DOM, и поэтому селектор + не будет работать.

Вы должны либо изменить свой HTML, как в приведенном ниже фрагменте, либо использовать альтернативные методы (включая JS).

.shopbar_image_container img { 
 
    height: 190px; 
 
    width: 190px; 
 
    cursor: pointer; 
 
    position: relative; /* added for positioning relative to img */ 
 
} 
 
.shopbar_image_over { 
 
    display: none; 
 
    height: 190px; 
 
    width: 190px; 
 
    opacity: 0.2; 
 
    background: #444; 
 
    position: absolute; 
 
    top: 8px; /* added for positioning */ 
 
    cursor: pointer; 
 
} 
 
.shopbar_image_container img:hover + .shopbar_image_over { 
 
    display: block; 
 
}

<div class="shopbar_image_container"> 
 
    <img src="img/t.jpg" /> 
 
    <div class="shopbar_image_over"></div> 
 
</div>

Вариант 2: (Используя JS)

Здесь HTML-структура не изменяется, но JS используется для отображения div, когда мышь находится над img. Поскольку div расположен абсолютно над img, мышь находится на div, и когда мышь отсутствует, div скрыт.

document.getElementById("baseImage").onmouseover = function() { 
 
    document.getElementById("divToShow").style.display = "block"; 
 
} 
 
document.getElementById("divToShow").onmouseout = function() { 
 
    document.getElementById("divToShow").style.display = "none"; 
 
}

.shopbar_image_container img { 
 
    height: 190px; 
 
    width: 190px; 
 
    cursor: pointer; 
 
} 
 
.shopbar_image_over { 
 
    display: none; 
 
    height: 190px; 
 
    width: 190px; 
 
    opacity: 0.2; 
 
    background: #444; 
 
    position: absolute; 
 
    cursor: pointer; 
 
}

<div class="shopbar_image_container"> 
 
    <div class="shopbar_image_over" id="divToShow"></div> 
 
    <img src="img/t.jpg" id="baseImage" /> 
 
</div>

источник

2015-01-27 06:21:13 Harry

Проверьте этот простой пример:

HTML:

<a>Hover over me!</a> 
<div>Stuff shown on hover</div>

CSS:

div { 
    display: none; 
} 

a:hover + div { 
    display: block; 
}

JSFiddle: http://jsfiddle.net/n03br282/

Надеюсь, что это поможет!

источник

2015-01-27 06:22:58 atiquratik

Попробуйте работать только с непрозрачностью - немного проще, что селекторы:

.shopbar_image_container img{ 
 
height:190px; \t 
 
width:190px; 
 
cursor:pointer; 
 
} 
 

 
.shopbar_image_over{ 
 
display:block; 
 
height:190px; \t 
 
width:190px; 
 
opacity:0; 
 
background:#444; 
 
position:absolute; 
 
cursor:pointer; 
 
} 
 

 
.shopbar_image_container .shopbar_image_over:hover{ 
 
opacity:0.2; \t 
 
}

  \t <div class="shopbar_image_container"> 
 
      \t <div class="shopbar_image_over"></div> 
 
     \t \t <img src="img/t.jpg" /> 
 
           
 
     \t </div>

источник

2015-01-27 06:25:50

Ну хитрость заключается в том, чтобы добавить position: absolute из bottom в shopbar_image_container,

Затем добавьте margin-top: this.height in px или tramsform: translateY(this.height px) для отображения .shopbar_image_over

*{box-sizing: border-box} 
 
.shopbar_image_container{ 
 
    position: relative; 
 
    height:190px; \t 
 
    width:190px; 
 
    margin-top: 190px 
 
} 
 
.shopbar_image_container img{ 
 
\t height:100%; 
 
\t cursor:pointer 
 
} 
 

 

 
.shopbar_image_over{ 
 
\t display:none; 
 
\t height:100%; \t 
 
\t width:100%; 
 
\t opacity:0.2; 
 
\t background:#444; 
 
\t position:absolute; 
 
    bottom: 100%; 
 
\t cursor:pointer; 
 
} 
 

 
.shopbar_image_container img:hover + .shopbar_image_over{ 
 
\t display:block; \t 
 
}

<div class="shopbar_image_container"> 
 
    <img src="http://lorempixel.com/400/400/" /> 
 
    <div class="shopbar_image_over"></div> 
 
</div>

источник

2015-01-27 06:28:40

CSS hover image show div

ответ

Смежные вопросы