这是 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");
它有效。为什么会这样?
这是 fiddle :http://jsfiddle.net/mMB3F/6/
最佳答案
如果您想回到原来的选择,您必须调用 .end()
两次,就像你在链上两次调用 child 一样。
$("#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();
}
);
关于javascript - 在 jQuery 中链接时 CSS 属性不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12128550/