如何在 a 中定位 h1 <a>？</a>

Question

我希望div在悬停时更改背景。 但是当div内的文本被悬停时，它不会改变背景。 这是我尝试过的，但所有背景div发生了变化。 我还在处理程序函数中尝试a > img而不是img ，但它根本不起作用。

function handlerIn() {
    $("img").css({"opacity":1});
}

function handlerOut() {
    $("img").css({"opacity":0});
}

$("a").mouseenter(handlerIn).mouseleave(handlerOut);

Answer 1

a > img不起作用，因为img是不是孩子a （ parent > child ），但后代（ achestor descendant ）。

所以你的 css 规则应该是这样的：

a:hover  img {
  opacity: 1;
}

所以你根本不需要 jQuery，但是如果你想使用 jQuery，那么你需要使用事件发生的a元素作为我们搜索img元素的根元素，否则你会找到所有img元素。

function handlerIn() {
  $(this).find('img').css({
    "opacity": 1
  });
}

function handlerOut() {
  $(this).find('img').css({
    "opacity": 0
  });
}

$("a").mouseenter(handlerIn).mouseleave(handlerOut);

Answer 2

你不需要 jquery 来完成这项工作。

它可以通过 css 来完成：

#kpop:hover, #fashion:hover, #martialarts:hover, #nature:hover{
  background: url('http://www.dike.lib.ia.us/images/sample-1.jpg/image_preview');
}

Answer 3

我不确定这是否正确，为什么您不使用hover()函数？ http://codepen.io/soulister/pen/MyZrPy