logo标签列表

创建点击图像叠加层

javascripthtmlcssonclickoverlay
3
我拥有的：我目前有这样一段代码，当你将鼠标悬停在图片上时，遮盖层会从底部向上滑动。

我想要的：我希望能够通过点击而不是悬停来实现相同的遮盖层从底部向上滑动效果。我很难弄清楚如何实现这一点。

代码：

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

你的 JavaScript 代码在哪里？点击动作在哪里？ - Sudhansu Choudhary
你需要添加JS代码，通过设置“on click”来添加/删除div的样式。 - Hatik
“onclick”需要JavaScript支持，你尝试过什么吗？仅使用CSS，可能可以通过“a：visited”实现某些效果，但可能不会按预期工作。 - Fred Gandt
@SudhansuChoudhary - 这里没有使用JavaScript。目前是通过CSS来实现悬停效果的。 - Obsidian Age
你需要使用JavaScript/jQuery来附加和执行像点击这样的操作。 - Sudhansu Choudhary
@ObsidianAge 知道了！我的意图是告诉 OP 使用 JavaScript 让它工作！ - Sudhansu Choudhary
6个回答
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>

希望这可以帮上你的忙！:)
嘿，Obsidian，这帮了很多！谢谢。 - MMM
2
尝试使用jQuery编写以下JavaScript代码：

JS

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

希望这有所帮助...
@ehsan 你在说什么？ - Clonkex
1
你可以仅使用CSS实现此操作。
我通过添加:focus选择器来匹配你的:hover选择器来实现此操作。
如果你的设备支持:hover，它将在悬停时显示，无需点击。如果你的设备不支持:hover，则点击该元素（例如在触摸屏上）将触发:focus状态，在这种情况下，它将模拟:hover状态的效果。
换句话说，我们改变了：
.container:hover .overlay

to 

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

关于焦点及其使用，您可以在这里阅读更多信息。

工作示例：

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

@ChandraShekhar 你可以使用Chrome开发者工具来模拟触摸屏。如果在触摸屏上点击div，则会触发:focus状态，并显示出任何效果，这些效果在:hover时显示出来。 - I haz kode
但是我点击时为什么没有得到它呢？ - Chandra Shekhar
@ChandraShekhar 请确保您已经开启移动模式或使用移动设备查看代码片段。如果您的设备支持:hover，则在悬停时会显示，无需点击。如果您的设备不支持:hover，则单击元素将触发:focus状态，在这种情况下将模拟OP的:hover状态的效果。 - I haz kode
1

@MMM

稍微改进的方法

CSS

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

JS

$(".container").on('click',function(){
    $(this).children(".overlay").toggleClass("show");
});

这个功能是，点击它会打开覆盖层，再次点击会隐藏覆盖层。

希望这能帮到你。

1

Css：

.fullHeight {
    height: 100%;
}

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


$(document).ready(function(){
    $('.container').click(function(){
        $('.overlay',this).addClass('fullHeight');
    })
})
.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%);
}
<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>

0
如果您的网页上有多个图像，您可以使用我为自己的项目创建的代码片段。它所做的就是检查元素在悬停时是否返回 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 =
            "";
    }
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接