مشکل در حرکت text هنکام hover و غیر

این تاپیک 0 پاسخ و 1 مشارکت کننده دارد . آخرین آپدیت توسط :  Shirin ،‏ 7 ماه و 4 هفته پیش .

این تاپیک تاکنون 145 بازدید داشته است .

نویسنده پست
سه شنبه ، 12 آوریل 2016     3:02 ب.ظ #


Shirin

Subscriber
5 پست7 تاپیک

من می خوام وقتی روی li  میروم p اولی به بالا حرکت کنه و هنگام خروج بیاد سر جای اولش ولی همان جا ثابت می مونه هنگام hover

میشه کمک کنید

اینم کد هام

 

.part4 {
height: 946px;
width: 100%;
display: block;
margin-bottom: 100px;
}

.part4 ul {
height: inherit;
width: 100%;
display: block;
}

.part4 ul li {
width: 31%;
display: inline-block;
margin: 0 0 30px 39px;
position: relative;
}

.part4 ul li a:hover {
background: white;
opacity: 0.7;
}

.ml {
margin-left: 0 !important;
}

.part4 ul li .p4-p1 {
font-size: 24px;
color: #5e5d5d;
position: absolute;
top: 30px;
right: 203px;
display: block;
}

#circle {
position: absolute;
top: -28px;
right: -28px;
}

#circle p {
font-size: 16px;
color: white;
position: absolute;
top: 15px;
right: 12px;
}
.p4-p2 {
display: none;
top: 60px;
right: 203px;
font-size: 22px;
color: #5e5d5d;
position: absolute;
}
.part4 ul li:hover .p4-p2 {
display: block;
}
.p4-p3 {
display: none;
color: #222222;
position: absolute;
bottom: 30px !important;
left: 51px !important;
font-size: 14px;
}
.part4 ul li :hover .p4-p3 {
display: block;

}
.p4-p3 span {
float: left;
vertical-align: top;
padding-top: 12px;
}
.p4-p3 img {
float: right;
padding-left: 145px;
vertical-align: top;
}

 

<section class="part4">
<div class="main">
<ul>
<li><a rel="nofollow" href="#">
<img src="Resource/Images/part4-img1.jpg" />
<p class="p4-p1">
فروشنده<br />
</p>
<p class="p4-p2">بچه ها</p>
<p class="p4-p3"><span>05-9554</span><img src="Resource/Images/shopp-icon.png" /></p>
</a></li>

<li><a rel="nofollow" href="#">
<img src="Resource/Images/part4-img2.jpg" />
<p class="p4-p1">
فروشنده<br />
</p>
<p class="p4-p2">بچه ها</p>
<p class="p4-p3"><span>05-9554</span><img src="Resource/Images/shopp-icon.png" /></p>
</a>
</li>
<li class="ml"><a rel="nofollow" href="#">
<img src="Resource/Images/part4-img3.jpg" />
<p class="p4-p1">
فروشنده<br />
</p>
<p class="p4-p2">بچه ها</p>
<p class="p4-p3"><span>05-9554</span><img src="Resource/Images/shopp-icon.png" /></p>
</a>
</li>
<li><a rel="nofollow" href="#">
<img src="Resource/Images/part4-img1.jpg" />
<p class="p4-p1">
فروشنده<br />
</p>
<p class="p4-p2">بچه ها</p>
<p class="p4-p3"><span>05-9554</span><img src="Resource/Images/shopp-icon.png" /></p>
</a>
</li>
<li><a rel="nofollow" href="#">
<img src="Resource/Images/part4-img3.jpg" />
<p class="p4-p1">
فروشنده<br />
</p>
<p class="p4-p2">بچه ها</p>
<p class="p4-p3"><span>05-9554</span><img src="Resource/Images/shopp-icon.png" /></p>
</a>
</li>
<li class="ml"><a rel="nofollow" href="#">
<img src="Resource/Images/part4-img2.jpg" />
<p class="p4-p1">
فروشنده<br />
</p>
<p class="p4-p2">بچه ها</p>
<p class="p4-p3"><span>05-9554</span><img src="Resource/Images/shopp-icon.png" /></p>
</a>

</li>
</ul>
<div id="circle">
<img src="Resource/Images/circle.png" />
<p>حراج</p>
</div>
</div>

</section>
<script>
$(document).ready(function () {

$(".part4 ul li").hover(function () {
if (true) {
$(".p4-p1").animate({ top: "5%" }, "fast");
}
});

});
</script>

0  تشکر
پست 1 تا 1 (از مجموع 1 پست)

برای پاسخ دادن به این تاپیک باید وارد سایت شوید .