Javascript 在jQuery中链接时CSS属性不起作用

这是jQuery代码：

$("#web").hover(
  function () {
    $(this).css({
             'background-color': '#ecf5fb',
             'cursor': 'pointer',
             'border': '1px solid #378ac4'
           })
           .children("a").children("img").attr("src", "1.png")
           .end().children("p").css("opacity", "1.0");

           $('#commentweb').stop(true, true).fadeIn();
  }, 
  function () {
    $(this).css({
             'background-color': '#e8e3e3',
             'border': '1px solid grey'
             })
             .children("a").children("img").attr("src", "2.png")
             .end().children("p").css("opacity", "0.5");

             $('#commentweb').stop(true, true).fadeOut();
  }
);

问题是不透明度没有改变，而其他一切都正常。但是如果我不写这个代码

$(this).css({
         'background-color': '#ecf5fb',
     'cursor': 'pointer',
     'border': '1px solid #378ac4'
       })
       .children("a").children("img").attr("src", "1.png");
$(this).children("p").css("opacity", "1.0");

它起作用了。为什么会这样

---

这里有一个问题：

如果您想回到原始jquery对象，您需要在其中添加一个额外的.end（），每个过滤操作都会在堆栈上放置一个新的jquery对象，对.end（）的每次调用都会“弹出”堆栈上的最后一个对象。这里有一个更新的fiddle:

如果您想回到原始jquery对象，您需要在其中添加一个额外的.end（），每个过滤操作都会在堆栈上放置一个新的jquery对象，对.end（）的每次调用都会“弹出”堆栈中的最后一个对象。这里有一个更新的提琴：

如果你想回到原来的选择，你必须调用两次，就像在链上调用两次children一样

$("#web").hover(
  function () {
    $(this).css({
             'background-color': '#ecf5fb',
             'cursor': 'pointer',
             'border': '1px solid #378ac4'
           })
           .children("a").children("img").attr("src", "1.png")
           .end().end().children("p").css("opacity", "1.0");

           $('#commentweb').stop(true, true).fadeIn();
  }, 
  function () {
    $(this).css({
             'background-color': '#e8e3e3',
             'border': '1px solid grey'
             })
             .children("a").children("img").attr("src", "2.png")
             .end().end().children("p").css("opacity", "0.5");

             $('#commentweb').stop(true, true).fadeOut();
  }
);

---

如果您想返回到原始选择，您必须调用两次，就像在链上调用两次子对象一样

$("#web").hover(
  function () {
    $(this).css({
             'background-color': '#ecf5fb',
             'cursor': 'pointer',
             'border': '1px solid #378ac4'
           })
           .children("a").children("img").attr("src", "1.png")
           .end().end().children("p").css("opacity", "1.0");

           $('#commentweb').stop(true, true).fadeIn();
  }, 
  function () {
    $(this).css({
             'background-color': '#e8e3e3',
             'border': '1px solid grey'
             })
             .children("a").children("img").attr("src", "2.png")
             .end().end().children("p").css("opacity", "0.5");

             $('#commentweb').stop(true, true).fadeOut();
  }
);

---

您是否尝试过：

光标：'pointer！重要提示“

？@ansi_lumen我刚刚尝试了一下，但它不起作用。请尝试：

“光标”：“指针！”！重要提示“

？@ansi_lumen我只是尝试了一下，但它不起作用