Question

如果我们在code snippet的第一张图片上鼠标悬停，第二行 - 第二列[黑莓图片]中显示的图片将隐藏，如果我们再次鼠标移出黑莓图像将是可见的。我只想覆盖图像上的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，但这里的图片完全不可见....

Answer 1

.grow:hover + .grow + .grow + .grow + .grow
{
  visibility: hidden;
}

You have to just remove above property from CSS.

Answer 2

希望你想要这个或其他东西吗？

＆＃13;

#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 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;
}

＆＃13;

<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>

＆＃13;

Answer 3

.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 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%;
}

如果我们鼠标悬停在上面的图像上，则下面的图像会隐藏

3 个答案: