Question

我是学习jquery和创建自己网站的新手。这是我的小提琴 JSFIDDLE。当您悬停时，新的div会显示一些文本。但文本正在走出那个div。我想在新div中使用该文本。我不知道为什么会这样。我知道这是一个愚蠢的问题，但我花了不少时间才能做到这一点。

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="example.js"></script>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="box">
  <h2 id='name'> Karan Shah </h2>
  <div id='innerbox'><span><h4 id='emptyInfo'></h4></span><div>
  <script>
    $('#innerbox').hide();
  </script>
</div>

<script>
$('#name').css('color','black');
$('#name').css('text-align','center');


$(document).ready(function () {
    var originalText = $('#name').text();
    var tOut;
    $("#box").hover(
        function () {   
            tOut = setTimeout(function(){
                $('#innerbox').show('slow',function(){
                    $('#emptyInfo').fadeOut(400, function () {
                        $(this).text('Welcome to my website').slideDown().css('text-align','center');
                    }); 
                }); 
            },1000);        

        },
        function(){
            clearTimeout(tOut);
            $('#innerbox').hide('slow',function(){
                $('#emptyInfo').hide('slow');
            });     
        }
    );
});
</script>

</body>
</html>

CSS

#box {
    background-color: lightgrey;
    width: auto;
    padding: 25px;    
    margin: 25px;
}
#emptyInfo{
    font-size: 150%;
}

#innerbox {
    background-color: white;
    width: auto;
    height: 30px;
    border-radius: 10px;
    border : 1px;
    border-style: solid;
    border-color: darkgrey;
}

Answer 1

就像Emmanuel提到的那样，Heading标签会带有自己的边距，设置#emptyInfo { margin: 0; }可以解决您的问题。

有关这些默认值的参考，您可以查看浏览器的特定默认样式表。见这里：How can I locate the default style sheet for a browser?

请注意，由于大多数HTML元素都带有默认值，因此HTML / CSS作者通常会＆＃34;规范化＆＃34;他们的网页很好地描述了W3C：http://www.w3.org/International/questions/qa-html-css-normalization。

Answer 2

#innerbox height应为auto。这里是JSfiddle

#innerbox {
    background-color: white;
    width: auto;
    height: auto; /*** This should be auto instead of 30px */
    border-radius: 10px;
    border : 1px;
    border-style: solid;
    border-color: darkgrey;
}

CSS不会在DIV中对齐文本

2 个答案: