Question

我有一些图像叠加问题。

基本上我有6个包含图像和标题叠加的框。在Click事件中，隐藏标题叠加层并显示文本叠加层，覆盖整个图像。

的问题：

点击叠加层按下其他框，我无法找到它的来源。

当框/图像大小为任何其他大小但默认值时，叠加层会大于图像。因此，在较小的屏幕尺寸上，叠加层会与图像重叠。

.vc_row-fluid {
 text-align:center;
}

.hr-banner {
    padding: 0;
    cursor: pointer;
    text-align:left;
    display:inline-block;
    max-width: 470px;
    max-height: 259px;    
    width: 100%;
    height: 100%;    
}

.hr-banner > img {
    width: 100%;
}

.hr-banner-title {
    margin: 0;
    color: #FFF;
    line-height: 2em;
    margin-top: -3em;
    margin-left: 16px;
    font-size:24px;
    font-weight:bold;

}
.hr-banner-text {
    display: none;
    position: absolute;
    top: 0;
    color: #FFF;
    font-size: 1.2em;
    background-color: rgba(0,0,0,0.6);
    max-width: 470px;
    max-height: 259px;    
    width: 100%;
    height: 100%;  
    padding:0;
    margin:0;
}

.hr-banner-text p {margin:16px;}

.hr-noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



<div class="hr-banner noselect">

<img draggable="false" src="/wp-content/uploads/2016/01/nvq.jpg" alt="" />
<h5 class="hr-banner-title">NVQs</h5>
<div class="hr-banner-text">

It is important that we allow our staff to take ownership of their own development. We currently have almost 100 employees studying for an NVQ across a variety of different specialisms – from business administration to management.

</div>
</div>

我意识到如果图像是包含div的背景图像，这可能会更好，但是，我没有编写此代码，也无法更改结构，只有CSS。

Answer 1

这是你的意思吗？

var hrBanner = document.getElementsByClassName('hr-banner')[0];

function showHideText() {
this.getElementsByTagName('h5')[0].classList.toggle('nodisplay');
this.getElementsByClassName('hr-banner-text')[0].classList.toggle('nodisplay');
}

hrBanner.addEventListener('click',showHideText,false);

.vc_row-fluid {text-align:center;}

.hr-banner {
	position: relative;
	background-color: rgb(0,0,0);
    cursor: pointer;
    text-align:left;
    display:inline-block;
    max-width: 470px;
    max-height: 259px;    
    width: 100%;
    height: 259px;    
}

.hr-banner > img {
    width: 100%;
}

.hr-banner-title {
	position: absolute;
	top:0;
	left:0;
    margin: 0;
    padding: 0;
    color: #FFF;
    line-height: 24px;
    font-size:24px;
    font-weight:bold;

}
.hr-banner-text {
	position: absolute;
	top:0;
	left:0;
    margin: 0;
    padding: 0;
    color: #FFF;
    font-size: 1.2em;
    background-color: rgba(0,0,0,0.6);
    max-width: 470px;
    max-height: 259px;    
    width: 100%;
    height: 100%;
}

.hr-banner-text p {margin:16px;}

.hr-noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.nodisplay {
    display: none;
}

<div class="hr-banner noselect">

<img draggable="false" src="/wp-content/uploads/2016/01/nvq.jpg" alt="" />
<h5 class="hr-banner-title">NVQs</h5>
<div class="hr-banner-text nodisplay">

It is important that we allow our staff to take ownership of their own development. We currently have almost 100 employees studying for an NVQ across a variety of different specialisms – from business administration to management.

</div>
</div>

CSS - div叠加响应问题

1 个答案: