علامات تبويب CSS مدورة

Question

لقد قمت بإنشاء بعض علامات تبويب التنقل المستديرة باستخدام CSS وأواجه مشكلة عند التنفيذ hover.

أولا هنا رابط الموقع نوافذ التبويب لأنه من الصعب جدا أن أشرح.من فضلك، قم بالتمرير فوق الجانب الأيسر من علامات التبويب لفهم مشكلتي.لقد شرحت أدناه.

لقد قمت بتعيين صورة الخلفية #navigation li العناصر التي تحتوي على الزاوية اليسرى ولدي بعد ذلك صورة خلفية ثانية (الزاوية اليمنى) تم تعيينها باستخدامها #navigation a.

ومع ذلك، عندما أقوم بالتمرير فوق الجانب الأيسر من علامة التبويب، يتم عرض جزء صغير فقط من الخلفية، وأفترض أن السبب في ذلك هو أنه يتم تمرير الماوس فوق منطقة li فقط.من الواضح أنني أرغب في إبراز علامة التبويب بأكملها كما تفعل عندما تقوم بالتمرير فوق بقية أجزاءها.

كان من الصعب جدًا شرح ذلك، لذا إذا كنت بحاجة إلى استجوابي أكثر لفهم المشكلة، فيرجى القيام بذلك.

Answer 1

زوجان من الأشياء:

أصلح المشكلة عن طريق إزالة الحشوة من <li> ووضعها مرة أخرى على الطفل <a> - يجب أن تكون المساحة التي يشغلونها هي نفسها حتى تتم محاذاة التمريرات.

الآن لديك مشكلة مختلفة، الزاوية اليسرى لا تظهر.قم بإصلاح هذا عن طريق جعل لون الخلفية لـ a و a:hover يساوي transparent بدلاً من الألوان - الآن يمكن أن يظهر <li> من خلاله.

أخيرًا، أقترح عليك تغيير السلوك من كونه صورة أخرى تمامًا، إلى نفس الصورة مع موضع خلفية مختلف، بحيث يتم تحميل التمرير بشكل غير مرئي.

يحرر:تم وصف تمرير CSS بدون تبديل الصور هنا

Answer 2

ومع مسج انها السوبر سهلة! ولكن يمكنك حتى محاولة مربع قابلة لل:

HTTP: //www.usabilitypost.com/2008/11/27/scalable-content-box-using-only-one-background-image/

ثم قم بتغيير صورة الخلفية على التحويم.

Answer 3

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

#navigation li:hover {
        background: #009BDA url(images/tab_left_on.gif) no-repeat top left;
        cursor : pointer;
        }

#navigation li:hover a {
        background: #009BDA url(images/tab_right_on.gif) no-repeat top right;
        color: #FFF;
}

ملحوظة أنه قد لا تعمل IE6.