jquery - 将鼠标悬停在 div 上时如何更改 sibling 的 child

Question

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

这是我的 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 在悬停时更改不透明度并触发文本显示，但使用该方法文本位于 mask 效果下方，如下所示: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 修复，我需要什么 JQuery 代码来触发图像以在悬停标题 div 时更改不透明度？

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/