Question

如何使用jquery显示具有相同属性css的隐藏div（info-alimento1），因为使用.show（），无法正常工作，更改位置

http://jsfiddle.net/acuario1220/kegctsnv/2/

$("#alimento1").mouseenter(function() {
            $( "#alimento2" ).fadeTo( "slow", 0.40 );
            $( "#info-alimento1" ).show();
        });
        $("#alimento1").mouseleave(function() {
            $( "#alimento2" ).fadeTo( "slow", 1 );



        });

Answer 1

.show()会根据您的意愿将您的元素设置为display: block;而不是display: inline-block; ..为此，您可以改为.css({display: 'inline-block'});

Answer 2

show（）函数会将元素的'display'属性更改为'block'，这会超出你的'display：inline-block'规则。

您应该将JavaScript更改为:(注意我已将.show();更改为.css('display', 'inline-block');）

$("#alimento1").mouseenter(function() {
    $("#alimento2").fadeTo("slow", 0.40);
    $("#info-alimento1").css('display', 'inline-block');
});
$("#alimento1").mouseleave(function() {
    $("#alimento2").fadeTo("slow", 1);
});

你也有冲突的CSS，这绝不是一个好主意。您应该考虑从您的CSS中删除display: inline-block;规则。这将使您遵守以下规则：

#info-alimento1 {
    width: 200px;
    height: 200px;
    background-color: #fff;
    position: absolute;
    display: inline-block;
    border: 2px solid #cfd9ea;
    margin-top: 40px;
    z-index: 100;
    margin-left: -80px;
    display: none;
}

如何使用jquery显示具有相同属性css的隐藏div

2 个答案: