السلام عليكم
هذه اضافة رائعة للمواقع تحتوي على زر يفتح بمجرد مرور الماوس عليها، عاين الاضافة بتمرير الماوس فوقها:
هناك امور يجب معرفتها في البداية وهي كود تعريف الاوامر لبعض اوامر css التي لايتعرف عليها بعض المتصفحات، لذا يجب ان تبدأ الجملة بها دائما والا لن تظهر النتيجة:
ضع هذا الكود في منطقة الهي
<style type="text/css">
.c2{
overflow:hidden;
width:45px;
height:50px;
background:url("https://++");
border:3px solid #000000;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
-webkit-border-top-left-radius:41px;
-moz-border-radius-topleft:41px;
border-top-left-radius :41px;
-webkit-border-top-right-radius:41px;
-moz-border-radius-topright:41px;
border-top-right-radius :41px;
webkit-border-bottom-left-radius:41px;
-moz-border-radius-bottomleft:41px;
border-bottom-left-radius :41px;
-webkit-border-bottom-right-radius:41px;
-moz-border-radius-bottomright:41px;
border-bottom-right-radius :41px;
}
.c1{
width:50px;
height:50px;
background:transparent;
margin-top:-50px;
margin-right:0px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
-ms-transition: all 2s ease;
transition: all 2s ease;
color:#000000;
}
.c2:hover , .c1:hover {
width: 300px;
height: 50px;
}
</style>
*dont forget change ++ to your link image.
هذا كود التعريف للمكان الذي يجب ان تظهر به الصورة ويوضع في منطقة البدي<body>:
<div class="a" dir="ltr">
<ul class="cl">
<li class="c2"></li>
</ul>
</div>
استمتع بهذه الاضافة.
ليست هناك تعليقات:
إرسال تعليق