لماذا الخاصية hover غير متاحة للعنصر after في CSS؟

محمود سعداوي2 · 5 يونيو 2022

لماذا الخاصية hover غير فعالة في الحالة التالية

شيفرة css

.submit-wrapper input.showForm{

    border: none;

    padding: 10px 2px;

    background-color: #fff;

    color: rgb(145, 181, 189);

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    text-align: center;

    z-index: 20;

}

.form-section .submit-wrapper::after{

    content: "";

    position: absolute;

    width: 100%;

    height: 4px;

    background-color: rgb(145, 181, 189);

    top: 100%;

    left: 0;

    transform: scaleX(0);

    transition: transform 2s;

}

.form-section .submit-wrapper:hover submit-wrapper::after{

    transform: scaleX(1);

    transform-origin: left;

}

كما أنها أيضا عند إستعمال console غير متاحة (disabled)

Hassan Hedr · 5 يونيو 2022

بتاريخ منذ ساعة مضت قال محمود سعداوي:

يبدو أن سؤالي غير واضح.

في المثال التالي ما أريده هو عند وضع الماوس على "send me a letter" يظهر خط بالعرض متحرك.

للمزيد من التوضيح

شيفرة html


<div class="section-4">
        <h1 class="section-heading">Contact</h1>
    
        <div class="form-section">
            <img src="./img/form-img.png" alt="">
            <form >
                <input type="text" placeholder="Your Name">
                <input type="email" placeholder="Your Email">
                <textarea placeholder="Your Message"></textarea>
                <input type="submit" value="Send">
            </form>
            <div class="submit-wrapper">
                <input type="submit" value="Send me a letter" class="showForm" />
            </div>
            
        </div> 
    </div>

css


.form-section{
    width: 70%;
    background-color: #ddd;
    margin: 5px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.form-section img{
    width: 700px;
    height: 500px;
}
.form-section form{
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 500px;
    margin: 10px 3px;
    background-color: #fff;
    border-radius: 10px;
    transform: scaleY(0);
    transition: transform 2s;
}
/* .form-section form:hover{
    transform-origin: bottom;
} */
.form-section form input{
    margin: 10px 2px;
    border: none;
    padding: 4px 10px;
    font-size: 15px;
    border-radius: 3px;
    border-bottom: 2px solid rgb(145, 181, 189);
    color: rgb(145, 181, 189);
    font-weight: bold;
}
.form-section form input::placeholder, .form-section form textarea::placeholder{
    color: rgb(145, 181, 189);
    font-family: 'Bellota Text', cursive;
    font-family: bold;
}
.form-section form textarea{
    margin: 10px 2px;
    border: none;
    padding: 4px 10px;
    font-size: 14px;
    border-bottom: 2px solid rgb(145, 181, 189);
    color: rgb(145, 181, 189);
    max-height: 120px;
    min-height: 100px;
    max-width: 100%;
    min-width: 70%;
    font-weight: bold;
}
.form-section form input[type="submit"]{
    background-color: rgb(145, 181, 189);
    color: #fff;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.submit-wrapper {
    position: absolute;
    width: 17%;
}
.submit-wrapper input.showForm{
    border: none;
    padding: 10px 2px;
    background-color: #fff;
    color: rgb(145, 181, 189);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    z-index: 20;
}
.form-section .submit-wrapper::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: rgb(145, 181, 189);
    top: 100%;
    left: 0;
    transform: scaleX(0);
    transition: transform 2s;
}
.form-section .submit-wrapper:hover submit-wrapper::after{
    transform: scaleX(1);
    transform-origin: left;
}

.active{
    transform: scaleY(1) !important;
    transform-origin: bottom;
    z-index: 10;
}

زد على ذلك عند إستعمالي لconsole قصد التثبت أكثر لم أستطع النقر على :hover

أعتذر عن سوء توضيحي للسؤال

لا يمكن استهداف الحالة hover للعنصر after مباشرة، فكما تلاحظ حتى ضمن أدوات المطور لا يمكنك تفعيلها، ما يمكنك فعله بدلًا من ذلك هو عند وضع المؤشر فوق العنصر صاحب الصنف submit-wrapper أن يتم تغيير تنسيقات العنصر after، ذلك ممكن بتغيير المحدد إلى التالي:

.form-section .submit-wrapper:hover::after {
 ..
}

التنسيقات في هذا المحدد سيتم تطبيقها على العنصر after

Wael Aljamal · 5 يونيو 2022

أرجو إرفاق شيفرة HTML للتجريب مع جميع التنسيقات

ويمكنك استخدام محرر الأكواد لوضعهم بطريقة واضحة

محمود سعداوي2 · 5 يونيو 2022

بتاريخ 6 دقائق مضت قال Wael Aljamal:

أرجو إرفاق شيفرة HTML للتجريب مع جميع التنسيقات

ويمكنك استخدام محرر الأكواد لوضعهم بطريقة واضحة

<div class="section-4">
        <h1 class="section-heading">Contact</h1>
    
        <div class="form-section">
            <img src="./img/form-img.png" alt="">
            <form >
                <input type="text" placeholder="Your Name">
                <input type="email" placeholder="Your Email">
                <textarea placeholder="Your Message"></textarea>
                <input type="submit" value="Send">
            </form>
            <div class="submit-wrapper">
                <input type="submit" value="Send me a letter" class="showForm" />
            </div>
            
        </div> 
    </div>

تفضل

محمود سعداوي2 · 5 يونيو 2022

يبدو أن سؤالي غير واضح.

في المثال التالي ما أريده هو عند وضع الماوس على "send me a letter" يظهر خط بالعرض متحرك.

للمزيد من التوضيح

شيفرة html

<div class="section-4">
        <h1 class="section-heading">Contact</h1>
    
        <div class="form-section">
            <img src="./img/form-img.png" alt="">
            <form >
                <input type="text" placeholder="Your Name">
                <input type="email" placeholder="Your Email">
                <textarea placeholder="Your Message"></textarea>
                <input type="submit" value="Send">
            </form>
            <div class="submit-wrapper">
                <input type="submit" value="Send me a letter" class="showForm" />
            </div>
            
        </div> 
    </div>

css

.form-section{
    width: 70%;
    background-color: #ddd;
    margin: 5px auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
}
.form-section img{
    width: 700px;
    height: 500px;
}
.form-section form{
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 500px;
    margin: 10px 3px;
    background-color: #fff;
    border-radius: 10px;
    transform: scaleY(0);
    transition: transform 2s;
}
/* .form-section form:hover{
    transform-origin: bottom;
} */
.form-section form input{
    margin: 10px 2px;
    border: none;
    padding: 4px 10px;
    font-size: 15px;
    border-radius: 3px;
    border-bottom: 2px solid rgb(145, 181, 189);
    color: rgb(145, 181, 189);
    font-weight: bold;
}
.form-section form input::placeholder, .form-section form textarea::placeholder{
    color: rgb(145, 181, 189);
    font-family: 'Bellota Text', cursive;
    font-family: bold;
}
.form-section form textarea{
    margin: 10px 2px;
    border: none;
    padding: 4px 10px;
    font-size: 14px;
    border-bottom: 2px solid rgb(145, 181, 189);
    color: rgb(145, 181, 189);
    max-height: 120px;
    min-height: 100px;
    max-width: 100%;
    min-width: 70%;
    font-weight: bold;
}
.form-section form input[type="submit"]{
    background-color: rgb(145, 181, 189);
    color: #fff;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}
.submit-wrapper {
    position: absolute;
    width: 17%;
}
.submit-wrapper input.showForm{
    border: none;
    padding: 10px 2px;
    background-color: #fff;
    color: rgb(145, 181, 189);
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    z-index: 20;
}
.form-section .submit-wrapper::after{
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: rgb(145, 181, 189);
    top: 100%;
    left: 0;
    transform: scaleX(0);
    transition: transform 2s;
}
.form-section .submit-wrapper:hover submit-wrapper::after{
    transform: scaleX(1);
    transform-origin: left;
}

.active{
    transform: scaleY(1) !important;
    transform-origin: bottom;
    z-index: 10;
}

زد على ذلك عند إستعمالي لconsole قصد التثبت أكثر لم أستطع النقر على :hover

شكرا لكم.

أعتذر عن سوء توضيحي للسؤال

لماذا الخاصية hover غير متاحة للعنصر after في CSS؟

السؤال

محمود سعداوي2

4 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

Wael Aljamal

محمود سعداوي2

محمود سعداوي2

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية