不要在p標籤內加div標籤

案例：滑鼠移動上去出現提示

先貼上正確的程式碼：

HTML部分：

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

<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>

   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標籤的子元素；