如何在 TD 中选择 IMG？答案

【问题标题】：How do I select an IMG inside a TD?如何在 TD 中选择 IMG？
【发布时间】：2013-10-10 21:38:12
【问题描述】：

这是我的 jQuery 代码...

<script>
  $(document).ready(function(){
    $("gallery", Image).hover(function(){
      $(this).stop().animate({ opacity: 1.0 }, 800);
    });
  });
</script>

我的 HTML...

<table class="gallery">
  <tr>
    <td>                
      <img src="photo.jpg">
    </td>
  </tr>
</table>

我的 CSS...

.gallery img {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

当我执行鼠标悬停时，我希望“图库”表中的任何图像将不透明度更改为 1.0。我确定我的语法是错误的。我可以做我想做的事吗？我不想为每个图像指定类。

【问题讨论】：

jQuery 选择器严格遵循 CSS 选择器语法。如有疑问，请将其视为在样式表中编写 CSS 选择器。
这实际上是一个非常有用的评论。我以后一定会记住这一点的，谢谢！
任何超过“#theid”、“.theclass”或“theTagName”的选择器都会被传递给document.querySelectorAll()，只要选择器不包含任何jQuery自定义选择器。因此，在大多数情况下，它实际上是相同的语法。

标签： jquery css hover jquery-animate selector

【解决方案1】：

您需要在开头指定一个带有. 的类，然后引号中的任何内容都将是子元素：

$(".gallery img").hover(function(){

【讨论】：

【解决方案2】：

你可以用 javascript 来做，但用 css 做起来要容易得多。只需添加：

.gallery img {
     opacity:0.5;
     transition: all 0.25s ease;
}

.gallery img:hover {
    opacity:1;
}

【讨论】：

因为我想让它动画化，而不仅仅是改变不透明度。
谢谢，但我会担心浏览器不支持过渡（IE9 及以下）。
别担心！祝你好运:)
这是一个很好的答案，可能是最简单的，但跨浏览器不完全支持过渡。
我喜欢将过渡视为可用性的装饰，因此它不一定需要使用网站或产品（对于 UX），但它是一种奖励。后备也不是太简陋，也不会影响流量。

【解决方案3】：

改变这一行：

$("gallery", Image).hover(function(){

到这里：

$(".gallery img").hover(function(){

【讨论】：

【解决方案4】：

SHOW DEMO

jQuery

$(document).on({

    mouseenter: function () {

        $(".gallery img").stop().animate({ opacity: 1.0 }, 800);  

    },
    mouseleave: function () {

        $(".gallery img").stop().animate({ opacity: 0.5 }, 800);  
    }
}, "#gal");

HTML

<table id="gal" class="gallery">
    <tr>
       <td>                
          <img src="img">
      </td>
   </tr>
</table>

CSS

.gallery img {

    opacity: 0.5;
}

【讨论】：