Question

我有什么：我目前有代码，所以如果将鼠标悬停在图片上，叠加层将从下往上滑动。

我想要什么：我希望能够通过onclick而不是悬停从下到上实现相同的叠加幻灯片。我无法弄清楚如何实现这一目标。

代码：

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay {
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

</body>
</html>

Answer 1

使用jQuery尝试此Javascript

JS

<audio>

希望这会有所帮助..

Answer 2

要做到这一点，你需要JavaScript，或者更好的是jQuery。使用jQuery，您可以轻松地将叠加层应用于.container：

的子项

$(".container").on('click', function() {
  $(this).children(".overlay").css('height', '100%');
});

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.text {
  white-space: nowrap;
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h2>Slide in Overlay from the Bottom</h2>
<p>Click on the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

希望这有帮助！：）

Answer 3

您可以单独使用CSS。

我可以通过添加:focus选择器来匹配您的:hover选择器来实现此目的。

如果您的设备支持:hover，则会在悬停时显示，不需要您点击。如果您的设备不支持:hover，则点击该元素（例如在触摸屏上）将触发:focus状态，在这种情况下，模拟 {{1>}的效果1}}状态。

换句话说，我们改变了：

:hover

到

.container:hover .overlay

详细了解焦点及其使用情况here

工作示例：

＆＃13;

.container:hover .overlay, .container:focus .overlay

＆＃13;

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.container:hover .overlay, .container:focus .overlay {
  height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

＆＃13;

Answer 4

@MMM

略微即兴的方式

CSS

$.ajax({
    url:"/test",
    type:"POST",
    data:obj,
    success:function(){

    }, error:function(){

    }
});

JS

.container .overlay.show{
  height:100%;
}

这是做什么的。点击它打开叠加，再次点击它隐藏叠加

希望这会有所帮助

Answer 5

<强>的CSS：

.fullHeight {
    height: 100%;
}

<强> Jquery的：

$(document).ready(function(){
    $('.container').click(function(){
        $('.overlay',this).addClass('fullHeight');
    })
})

＆＃13;

$(document).ready(function(){
    $('.container').click(function(){
        $('.overlay',this).addClass('fullHeight');
    })
})

＆＃13;

.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #008CBA;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.fullHeight {
    height: 100%;
}

.text {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<h2>Slide in Overlay from the Bottom</h2>
<p>Hover over the image to see the effect.</p>
<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

＆＃13;

Answer 6

如果您的网页上有多张图片，则可以使用我为自己的项目创建的代码段，它所做的只是检查元素是否在悬停时返回true，否则返回null。

function isHover(e) {
    return (e.parentElement.querySelector(':hover') === e);
}
var myDiv = document.getElementById('container');
document.addEventListener('mousemove', function checkHover() {
    var hovered = isHover(myDiv);
    if (hovered !== checkHover.hovered) {
        hovered ? document.getElementById("overlay").style = "width: 100%;" : document.getElementById(
                "overlay").style =
            "";
    }
});

创建onclick图像叠加层

6 个答案: