将鼠标悬停在 div 上时如何更改兄弟姐妹的 child

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 在悬停时更改不透明度并触发文本显示，但使用该方法文本位于遮罩效果下方，如下所示：http://jsfiddle.net/kaxla/L05wLccd/ 我比较确定由于 HTML 的布局方式，无法使用 CSS 解决此问题。我错了吗？

现在我认为它必须用 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();
});

这是一个fiddle：http://jsfiddle.net/kaxla/pmujh90c/

它工作正常，但当我将鼠标悬停在标题上时，不透明效果消失了。

假设它不能用普通的 CSS 修复，当标题 div 悬停在上方时，我需要什么 JQuery 代码来触发图像改变不透明度？

Answer 1

将 JQuery 改得有点像这样，使其能够满足您的需求：

$(".outerdiv").mouseenter(function(){
  $(this).find(".title").show();
  $(this).find('.image').fadeTo("slow", .2);    
});

$(".outerdiv").mouseleave(function(){
  $(this).find(".title").hide();
  $(this).find('.image').fadeTo("slow", 1);        
});

这是工作版本：http://jsfiddle.net/pmujh90c/3/

Answer 2

当鼠标悬停在标题上时，它会从图片中获取焦点，因此调用 mouseleave 函数你需要设置标题，这样它就不会获得焦点，这样就可以了

Answer 3

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

注意事项：

这不适用于触控设备。
IE 8 & 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 上时，我们仍然悬停在 [=13] 上=].

仍然没有解决的问题是 link 现在被 .title 遮住了。最好的解决方案是修改标记，使 .title 位于 link 内，然后我们可以像对待 .outerdiv 一样对待 a.image。

适用于所有浏览器（IE 8-10 除外）的技巧是将 pointer-events: none; 添加到 .title，这将允许点击事件通过它传递到 link 下面。

将鼠标悬停在 div 上时如何更改兄弟姐妹的 child

How to change the child of a sibling when hovering over a div

jquery

css

squarespace