1.為什么類名為link2下的p元素當(dāng)鼠標(biāo)滑動到a元素上時,由于內(nèi)容太長造成文字不能一行顯示?2.怎么使用jQuery css()方法設(shè)置,p:after偽類的left值?

<!DOCTYPE?html>
<html>
<head>
????<meta?charset="UTF-8">
????<title>幽靈按鈕</title>
????<style?type="text/css">
????????*?{
????????????margin:?0;
????????????padding:?0;
????????}
????????#container?{
????????????margin:?100px?auto;
????????????width:?80%;
????????????height:?300px;
????????????background-color:?#0A0A0A;
????????}
????????.link?{
????????????float:?left;
????????????margin:?0?1%;
????????????width:?31%;
????????????position:?relative;
????????}
????????.link?span?{
????????????display:?inline-block;
????????????width:?100%;
????????????height:?180px;
????????????-webkit-transition:?all?0.5s;
????????}
????????.link1?span?{
????????????background:?url(images/mission.png)?no-repeat?center?center;
????????}
????????.link2?span?{
????????????background:?url(images/play.png)?no-repeat?center?center;
????????}
????????.link3?span?{
????????????background:?url(images/touch.png)?no-repeat?center?center;
????????}
????????.link?span:hover?{
????????????-webkit-transform:?rotate(360deg)?scale(1.2);
????????}
????????.link?a?{
????????????position:?relative;
????????????display:?inline-block;
????????????margin:?20px?20%?0;
????????????width:?60%;
????????????height:?40px;
????????????border:?2px?solid?#FFFFFF;
????????????text-indent:?10px;
????????????background:?url(images/allow.png)?no-repeat?85%?center;
????????????line-height:?40px;
????????????font-size:?20px;
????????????font-weight:?bold;
????????????text-decoration:?none;
????????????color:?#098822;
????????????-webkit-transition:?all?0.5s;
????????}
????????.link?i?{
????????????position:?absolute;
????????????display:?inline-block;
????????????background-color:?white;
????????????opacity:?0;
????????????-webkit-transition:?all?0.5s;
????????}
????????.link?a:hover?{
????????????background-position:?95%?center;
????????}
????????.link?a:hover?i{
????????????opacity:?1;
????????}
????????.link?a:hover?.lineTop?{
????????????-webkit-transform:?translate(100px,0);
????????}
????????.link?a:hover?.lineBottom?{
????????????-webkit-transform:?translate(-100px,0);
????????}
????????.link?a:hover?.lineRight?{
????????????-webkit-transform:?translate(0,25px);
????????}
????????.link?a:hover?.lineLeft?{
????????????-webkit-transform:?translate(0,-25px);
????????}
????????.lineTop,.lineBottom?{
????????????height:?2px;
????????????width:?30px;
????????}
????????.lineTop?{
????????????top:?-2px;
????????????left:?-100px;
????????}
????????.lineBottom?{
????????????bottom:?-2px;
????????????right:?-100px;
????????}
????????.lineRight,.lineLeft?{
????????????height:?8px;
????????????width:?2px;
????????}
????????.lineRight?{
????????????right:?-2px;
????????????top:?-25px;
????????}
????????.lineLeft?{
????????????left:?-2px;
????????????bottom:?-25px;
????????}
????????.link?p?{
????????????position:?absolute;
????????????top:?50%;
????????????background-color:?#17A654;
????????????line-height:?35px;
????????????height:?35px;
????????????color:?white;
????????????text-align:?center;
????????????padding:?0?15px;
????????????border-radius:?5px;
????????????opacity:?0;
????????}
????????.link?p:after?{
????????????content:?'';
????????????position:?absolute;
????????????top:?100%;
????????????left:?50%;
????????????border-top:?10px?solid?#17A654;
????????????border-left:?10px?solid?transparent;
????????????border-right:?10px?solid?transparent;
????????}
????</style>
????<script?src="js/jquery-1.8.3.min.js"></script>
</head>
<body>
????<div?id="container">
????????<div?class="link?link1">
????????????<span></span>
????????????<a?href="">?
????????????????<i></i>?
????????????????<i></i>
????????????????<i></i>
????????????????<i></i>
????????????????Mission
????????????</a>
????????????<p>My?mission?is?clear</p>
????????</div>
????????<div?class="link?link2">
????????????<span></span>
????????????<a?href="">
????????????????<i></i>
????????????????<i></i>
????????????????<i></i>
????????????????<i></i>
????????????????Play
????????????</a>
????????????<p>My?mission?is?clear?ssssssssssssssssfffffffffffllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll</p>
????????</div>
????????<div?class="link?link3">
????????????<span></span>
????????????<a?href="">
????????????????<i></i>
????????????????<i></i>
????????????????<i></i>
????????????????<i></i>
????????????????Touch
????????????</a>
????????????<p>My?mission?is?clear?sssss</p>
????????</div>
????</div>
????<script?type="text/javascript">
????????$(function(){
????????????$('.link?.button').hover(function(){
????????????????//?var?lp=$(this).next('p').width();
????????????????//?var?a=30/lp;
????????????????//?var?b=20/(lp+30);
????????????????//?var?le=100*(1+a-b)/2;
????????????????//?$(this).next('p:after').css('left',?le+'%');怎么選擇偽類?
????????????????var?pos=$(this).offset().left;
????????????????var?pos1=$(this).parents('div').offset().left;
????????????????var?dis=($(this).outerWidth()-$(this).next('p').outerWidth())/2;
????????????????var?l=pos-pos1+dis;
????????????????$(this).next('p').css('left',?l+'px').animate({'top':62+'%','opacity':1},300);
????????????},function?()?{
????????????????$(this).next('p').animate({'top':50+'%','opacity':0},300);
????????????})
????????})
????</script>
</body>
</html>