css - ترجمة - transitions شرح




كس: بعد انتقال الماوس (2)

التحولات كس لا تزال تجريبية في ويبكيت لذلك فمن المحتمل أنك قد ضرب بعض الحافة حالة الحلة التي تنطوي على :: بعد الزائف محدد. أقترح تجنب ذلك تماما ومجرد نقل border-color بدلا من ذلك. نجحت هذه العملية في كروم و سفاري:

#small_gal div.p {
    border: 2px solid transparent;
    -webkit-transition: border-color 1s ease-in;
}

#small_gal div.p:hover {
    border-color: orange;
}

بنية هتمل

<div id="small_gal">
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
    <div><img src="images1.jpg" /></div>
</div>

الصور هي وجود دروبشادوز حتى border ليست حلا، كما سيكون خارج الصورة

الحدود تمر بمرحلة انتقالية وتعمل بسلاسة على فف ولكن ليس في الكروم أو المتصفحات الأخرى

هنا هو الرمز الذي كنت قد استخدمت

#small_gal div:hover{cursor: pointer;}
#small_gal div:after {
    content: '';
    position: absolute;
    width: 112px;
    height: 81px;
    border: 3px solid #e27501;
    left: 9px; top: 9px;
    z-index: 9;

    opacity: 0;
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}
#small_gal div:hover:after {
    opacity: 1;
}

ملحوظة:

#small_gal

هو فقط الحاوية كل ملف هو ملفوفة في ديف حتى نتمكن من تنفيذ: بعد








css-transitions