div标签和p标签的那两三件事

不要在p标签内加div标签

案例：鼠标移动上去出现提示

先粘贴正确的代码：

HTML部分：

<p id="hint">
    <span>你好<i class="rationale"><i>一点都不好</i></i></span>
    <span>TA好<i class="rationale"><i>呵呵呵呵呵呵呵</i></i></span>
</p>

CSS部分：

<style type="text/css">
 .rationale{ position:absolute;
             background:#ffffdf;
             border:1px dotted #ccc; 
	     width:200px; 
             line-height:22px; 
	     padding:5px 8px; 
	     display:none;
             top:3px; 
             border-radius:10px;
             box-shadow:2px 2px 5px rgba(0,0,0,0.2);}
  #hint span{ background:#eee;
		color:#f66;padding:0 8px;
		display:inline-block;
		margin:3px 2px;
		border-radius: 3px;
		position:relative;}
   #hint span:hover{cursor:pointer;}   /*鼠标都放上去变小手*/
   #hint span:hover .rationale{ display:block;  /*鼠标放上去，i标签出现*/
				 left:100%;
				 z-index:999;
				top:0;}   </style>

上面是用css实现的效果，现在贴一下用jQuery实现的效果;二者选其一即可

   JS部分：

<script>  

$("#hint span").mouseenter(function(){
    $(this).css({"position":"relative","cursor":"pointer"});
    $(this).children(".rationale").css({"left":"-80px","top":"110%","z-index":"999"}).show();
}).mouseout(function(){
    $(this).children(".rationale").hide();
}) 

</script>

现在要说一下我开始错的部分啦；我开始将<i></i>标签写成<div></div>；然后鼠标移动上去没有效果；

<p id="hint">
    <span>你好<div class="rationale"><i>一点都不好</i></div></span>
    <span>TA好<div class="rationale"><i>呵呵呵呵呵呵呵</i></div></span>
</p>

经过调试发现：

注意：p标签选择死亡（自动结束），就是不把div包在里面；

所以不是css或者js效果问题；是选择器压根没有选中它，因为它已经不是p标签的子元素；