Question

如何在悬停时为我的图片创建文字叠加层。

当我将鼠标悬停在图像上时，如何阻止所有其他div移动。就像我页面上的所有内容都略有变化我希望我的页面上没有任何其他内容可以移动，只需在悬停时显示叠加层。非常感谢任何帮助 Fiddle更有意义。（打开JS框到最大，这样你就可以看到我在说什么）

HTML：

<div class='wrapper'>       
    <div id = 'portfolioContainer'> 
        <ul id='portfolioGallery'> 
            <li> 
                <a href="" target="_blank">
                    <img src= "" class='gallImage'>
                    <div class='gallText'> HTML CSS Javascript </div> 
                </a>
            </li>   
            <li> 
                <a href="" target="_blank">
                    <img src= "" class='gallImage'>
                    <div class='gallText'> HTML CSS(Sass) Javascript </div> 
                </a>
            </li>   
            <li> 
                <a href="" target="_blank">
                    <img src= "" class='gallImage' >
                    <div class='gallText'> HTML CSS Javascript </div>
                </a>
            </li>   
        </ul>
    </div>
</div>

JS：

$('.gallText').hide();

$('.gallImage').mouseover(function(){
    $(this).css('opacity','.2');
    $(this).next('div.gallText').show();
}).mouseout(function(){
    $(this).css('opacity','1');
    $(this).next('div.gallText').hide(); 
});

CSS：

#portfolioGallery {
    list-style:none;
    text-align: center;
}

#portfolioGallery li {
    display:inline-block;
    padding: 20px 20px;
}

#portfolioGallery img {
     border:3px solid #021a40;
     width: 350px;
     height: 200px;
    background:#D4CFC7;

}

Answer 1

一种解决方案是使用visibility: hidden / visibility: visible代替display: none;和display: block。 Visibility:hidden表示与display：none不同，该元素不可见，但在页面上为其分配了空间。例如：

＆＃13;

$('.gallText').css("visibility", "hidden");

$('.gallImage').mouseover(function() {
  $(this).css('opacity', '.2');
  $(this).next('div.gallText').css("visibility", "visible");
}).mouseout(function() {
  $(this).css('opacity', '1');
  $(this).next('div.gallText').css("visibility", "hidden");
});

＆＃13;

#portfolioGallery {
  list-style: none;
  text-align: center;
}
#portfolioGallery li {
  display: inline-block;
  padding: 20px 20px;
}
#portfolioGallery img {
  border: 3px solid #021a40;
  width: 350px;
  height: 200px;
  background: #D4CFC7;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='wrapper'>

  <div id='portfolioContainer'>
    <ul id='portfolioGallery'>
      <li>
        <a href="" target="_blank">
          <img src="" class='gallImage'>
          <div class='gallText'>HTML CSS Javascript</div>
        </a>
      </li>
      <li>
        <a href="" target="_blank">
          <img src="" class='gallImage'>
          <div class='gallText'>HTML CSS(Sass) Javascript</div>
        </a>
      </li>
      <li>
        <a href="" target="_blank">
          <img src="" class='gallImage'>
          <div class='gallText'>HTML CSS Javascript</div>
        </a>
      </li>

    </ul>
  </div>

</div>

＆＃13;

文字覆盖在悬停的图像上。如何阻止其他div移动

1 个答案: