Question

我在页面上有一个图像，而在信息文本Code Pen Example上有一个div。

<div>
  <img src="http://placehold.it/400x200"/>
  <div class="info">
    <a href="#">GO</a>
    <span>Title</span>    
    <p>Some information text</p>
  </div>
</div>

我希望div信息不可见，当我将鼠标移到图像上时，div将显示在图像上，具有透明度，并且图像的宽度和高度完全相同。

我希望div信息中的锚点位于右上角。我怎么能这样做？

Answer 1

不需要jQuery。

您需要相对定位父元素.overlay。如果您希望显示inline-block元素的尺寸，也可以将显示更改为img。绝对定位.info元素以使其与父元素具有相同的大小。使用rgba()颜色获得透明度。当鼠标悬停在.overlay img:hover + .info, .info:hover和.info元素上时，使用选择器block将img元素的显示更改为.info。

Example Here

.overlay {
    display:inline-block;
    position:relative;
}
.info {
    display:none;
    background-color: rgba(240,240,240,0.5);
    padding: 8px;
    text-align: center;
    position:absolute;
    top:0; right:0;
    bottom:0; left:0;
}
.overlay img:hover + .info, .info:hover {
    display:block;
}

如果您希望叠加层淡入/过渡，只需操纵元素的opacity而不是更改显示。 (example)

要获得更好，更详细的答案 - 请参阅my other answer here。

Answer 2

你也可以使用jQuery，但不是首选：

$(document).ready(function(){
     $(".info").hover(function(){
         $(this).show();
     });
});

或者正如@Josh建议的那样，简单的CSS会更快，并且无需加载大型库：

.overlay img:hover, .info:hover {
    display:block;
}
// Credits for this go to Josh Crozier

请注意rgba在IE8及以下版本中不起作用。不确定你是否会支持它，但我想我会永远告诉你

Answer 3

首先，您需要使用CSS隐藏div.info：

div.info { display:none }

然后使用jQuery，您需要创建一个函数来检测鼠标何时悬停img：

function() {

    $("img").hover(function() {

          $(".info").css("display","block");
          $(".info").width($(img).width());
          //More things
    });
}

Answer 4

看起来像这样：

<script type="text/javascript">
    $(document).ready(function(){
        $("#yourdiv").mouseover(function(){
            //
        });
        $("#yourdiv").mouseout(function(){
            //
        });
    });
</script>
<style type="text/css">
.yourdiv{
    background-image: url(yourimg.jpg);
    height: 420px;
    width: 420px;
}
</style>
<div id="yourdiv"></div>

Answer 5

您的详细信息对此请求帮助有点模糊，同时您没有对您的jquery提供任何尝试，所以基本上我给您最简单的形式。

以下是codepen

注意

使用了codepen中的CSS重置，并且必须调用jquery库才能使其在您执行的任何操作中起作用。

另外，由于这个问题相当懒，我没有为你提供任何IE后备，因为我觉得自己很懒。:)

HTML

    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> 
    <div id="overlay" class="info">
      <a id="show-me" href="#">GO</a>
      <span>Title</span>    
      <p>Some information text</p>
        <div id="hidden-div">
          <div class="content">
            <p>Some Content Here</p>
            <a id="close" href="#">&#x2716; Close Overlay!</a>
          </div>
      </div>
  </div>

CSS

*, 
*:before, 
*:after { 
box-sizing: border-box; 
}

body, 
html { 
margin: 1em; 
font-family: 'Open Sans', sans-serif;
}

a:link { 
text-decoration: none; 
color: #DB1F1F; 
}

.info {
  background-image: url('http://placehold.it/400x200'); 
  background-repeat: no-repeat; 
  background-size: cover; 
  background-color: #E0E0E0;
  padding: 8px;
  height: 200px; 
  width: 400px; 
  position: relative; 
  z-index: 1; 
}

#hidden-div { 
 display: none; 

 position: absolute;
 height: 200px; 
 width: 400px; 
 top: 0; 
 left: 0; 
 background: rgba(205,36,36,.5);
 display: none;
 z-index: 0
}

.content { 
position: relative; 
top: 50px; 
}

.content p { 
margin: .5em 0; 
color: #fafafa;
}

.content a:link, 
.content a:visited { 
color: #950000; 
font-weight: 700;
}

JQUERY

$(document).ready(function(){ 
  $("#show-me").click(function(){ 
  $("#hidden-div").toggle("slow"); 
  });
  $("#close").click(function(){ 
  $("#hidden-div").toggle("fast");
  });
});

创建图像叠加层

5 个答案:

HTML

CSS

JQUERY