将鼠标悬停在div上时如何更改兄弟姐妹的孩子答案

【问题标题】：How to change the child of a sibling when hovering over a div将鼠标悬停在div上时如何更改兄弟姐妹的孩子
【发布时间】：2015-05-01 17:40:07
【问题描述】：

我通常是一名 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/ 我相对确定无法通过以下方式解决此问题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/pmujh90c/

除了当我将鼠标悬停在标题上时，不透明效果消失了。

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

【问题讨论】：

文字位于图像顶部，因此当您将其悬停时，您将鼠标离开图像。
好的，所以我可以删除mouseleave图像部分，它可以工作，但不透明度一直保持不变。没有办法让它根据 mouseleave 的某些实例改变不透明度，而其他实例不存在？

标签： jquery css squarespace

【解决方案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/

【讨论】：

天哪，我知道这有点像我放入东西的顺序。非常感谢！

【解决方案2】：

使用当前 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 上时，我们仍然悬停在.outerdiv 上。

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

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

【讨论】：

【解决方案3】：

当鼠标悬停在标题上时，它会从图片中获取焦点，因此调用 mouseleave 函数需要设置标题，使其无法获得焦点，这样会很好

【讨论】：