Question

我通常是Rails开发人员，但我错误地同意做一些Squarespace自定义工作。我正在尝试构建悬停遮罩效果，当用户将鼠标悬停在图像上时，会出现标题并且图像变得不透明。

这是我的HTML

<div class="outerdiv">
    <a class="image" href="http://google.com">
        <img src="https://placekitten.com/g/200/300"></img>
    </a>
    <div class="title">
        words
    </div>
</div>

我最初尝试在悬停时使用外部div更改不透明度并触发要显示的文本，但是使用该方法，文本位于蒙版效果下方，如下所示：https://github.com/Quixotix/PHP-ZipCode-Class/blob/master/zipcode.php我相对确定不可能用CSS来解决这个问题，因为HTML的布局方式。我错了吗？

现在我认为必须使用JQuery，所以我已经得到了这个：

这是我的CSS：

.title {
  position:absolute;
  margin-top: -165px;
  width: 100%;
  font-size: 30px;
  text-transform: uppercase;
}

这是我的JS（JQuery）：

$(".image").mouseenter(function(){
  $(this).fadeTo("slow", .2);
});

$(".image").mouseleave(function(){
  $(this).fadeTo("slow", 1);
});

$(".outerdiv").mouseenter(function(){
  $(this).find(".title").show();
});

$(".outerdiv").mouseleave(function(){
  $(this).find(".title").hide();
});

这是一个小提琴：http://jsfiddle.net/kaxla/L05wLccd/

除非我将鼠标悬停在标题上，否则不透明效果会消失。

假设无法用纯CSS修复，当标题div悬停时，我需要用什么JQuery代码来触发图像来改变不透明度？

Answer 1

使用当前HTML结构的CSS可以实现您想要实现的目标。

警告：

这不适用于仅触控设备。
IE 8＆amp; 9不支持CSS过渡，因此不透明度会立即改变而不是淡化。

嘿是 fiddle 。

HMTL：

<div class="outerdiv">
    <a class="image" href="http://google.com">
        <img src="https://placekitten.com/g/200/300"></img>
    </a>
    <div class="title">
        words
    </div>
</div>

CSS：

.outerdiv {
    position: relative;
    float: left;
}
.outerdiv img {
    transition: opacity .6s ease;
}
.title {
    position:absolute;
    margin-top: -165px;
    width: 100%;
    font-size: 30px;
    text-transform: uppercase;
    opacity: 0;
    /* uncomment the line below to also transition the text */
    /* transition: opacity .6s ease-in-out; */
}

.outerdiv:hover img {
    opacity: .2;
}
.outerdiv:hover .title {
    opacity: 1;
}

<强>解释

我们能够实现这一目标的原因是我们将:hover附加到.outerdiv，因此当我们将鼠标悬停在.title上时，我们仍然会在.outerdiv上方悬停。

尚未解决的问题是该链接现在被.title遮盖了。对此最好的解决方案是修改标记，以便.title在链接中，然后我们可以处理a.image，直到现在我们已经处理.outerdiv。

适用于除IE 8-10之外的所有浏览器的黑客攻击是将pointer-events: none;添加到.title，这将允许点击事件通过它传递到下面的链接。

当盘旋在div上时如何改变兄弟姐妹的孩子

1 个答案: