如果我们将鼠标悬停在 code snippet
中的第一张图片上,则出现在第 2 行第 2 列的图片 [Blackberry image] 将会隐藏,如果我们将鼠标放在 -比再次黑莓图像将是可见的。我不想隐藏完整的图像,而是想覆盖图像上的 dropdown-options
。
demo link
鼠标悬停前 [ 黑莓图像可见 ]
鼠标悬停后 [ 隐藏黑莓图像 ]
#narrow-by-list { display :none;}
.choose1
{
text-transform: capitalize;
text-align: center;
font-weight:bold;
font-size:18px;
color: #000000;
}
.links1234 { color : #908983;}
.links1234:hover { color : #f85700;}
.grow {
padding: 5px 5px 5px 5px;
border-radius: 10px;
width: 23%;
margin: 5px 1% 5px 1%;
float: left;
position: relative;
transition: height 0.5s;
-webkit-transition: height 0.5s;
text-align: center;
background-color : #fff;
}
.grow:hover ul{
display: block;
}
.grow:hover + .grow + .grow + .grow + .grow {
visibility: hidden;
}
.grow ul {
margin: 0;
padding: 5px;
list-style: none;
display: none;
position: absolute;
z-index: 1;
background: #fff;
box-shadow: 0 0 5px 1px rgba(0,0,0,.25);
left: 0;
right: 0;
}
.grow img{
width: 100%;
}
.expand
{
position:relative;
right:8px;
top:4px;
}
<h2 class ="choose1">
Choose Your Brand
</h2>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/blackberry.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/blackberry_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/blackberry.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
<div class="grow">
<img class = "expand" src="http://sbdev2.kidsdial.com:81/media/cases/apple.png" onmouseover="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple_active.png'"
onmouseout="this.src='http://sbdev2.kidsdial.com:81/media/cases/apple.png'"
border="0" alt=""/>
<ul>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4.html">Apple Iphone 4</a>
</li>
<li>
<a class="links1234" href = "http://sbdev2.kidsdial.com:81/cases-covers/art-graphics/iphone-4s.html">Apple Iphone 4s </a>
</li>
</ul>
</div>
这个问题并不重复,因为在其他问题中问题是images were pushing outside
,但这里的图像是完全不可见的....
最佳答案
.grow:hover + .grow + .grow + .grow + .grow
{
visibility: hidden;
}
You have to just remove above property from CSS.
关于html - 如果我们将鼠标悬停在上面的图像上,下面的图像会隐藏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39721016/