jquery - 如何在 TD 中选择 IMG？

Question

这是我的 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。我确定我的语法是错误的。我可以做我想做的事吗？我不想为每个图像指定类。

Answer 1

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

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

Answer 2

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

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

.gallery img:hover {
    opacity:1;
}

Answer 3

更改此行：

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

对此：

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

Answer 4

展示演示

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;
}