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

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，这从来都不是一个好主意。 您应该考虑删除display: inline-block; 从你的CSS规则。 这将使您遵循以下规则：

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