div標籤和p標籤的那兩三件事
阿新 • • 發佈:2019-01-26
不要在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標籤的子元素;