Блог

У меня есть несколько кнопок, и одна из них имеет другой цвет, поэтому цвет наведения, который я выбрал для другого, не совсем подходит для этого. Поэтому я хотел создать для него #id. Вот CSS и HTML:

/! идентификатор, который я хотел создать, является самым последним css в приведенном здесь коде. Я видел путаницу в ответах, .boutonsim — это просто класс для всех кнопок, в то время как #boutonachat — это идентификатор.

Однако идентификатор имеет эффект 0. idk, как сделать синтаксис для этого.

 .boutonsim { /*construction d'un bouton avec faux fond*/
    display: block;
    height: 45px;
    width: 150px;
    position: absolute;
    top: 1.9em;
    z-index: 1;
    font-size: 16px;
}

.top-container > button {
    display: block;
    width: 150px;
    height: 45px;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0);
    color: white;
    border: none;
    font-family: 'CapitalisTypOasis', 'CapitalisTypOasisMedium';
    font-size: 16px;
    text-align: center;
    z-index: 2;
    position: absolute;
    top: 1.9em;
    padding: 0;
}


.top-container > button:hover {
    color: brown;
}

.top-container > button:hover {
    color: rosybrown;
}
 

HTML

         <div class="top-container">
        <img id="img2" src="images/haut.png" />
        <img id="title" src="images/nom.png" />
        <img id="logo" src="images/LOGO.png" />

        <div class="boutonsim" style="right: 80px;" name="boutonachat"> <!--image-->
            <img src="images/clipart/boutonORIGINALachat.png" /> <!--vrai bouton-->
        </div>
        <button id="boutonachat" style="right: 80px;">Billets</button>

        <div class="boutonsim" style="right: 280px;" name="boutonculture"> <!--image-->
            <img src="images/clipart/boutonORIGINAL.png" /> <!--vrai bouton-->
        </div>
        <button style="right: 280px;">Culture</button>

        <div class="boutonsim" style="right: 480px;" name="boutonpaysages"> <!--image-->
            <img src="images/clipart/boutonORIGINAL.png" /> <!--vrai bouton-->
        </div>
        <button style="right: 480px;">Paysages</button>

        <div class="boutonsim" style="right: 680px;" name="boutonaccueil"> <!--image-->
            <img src="images/clipart/boutonORIGINAL.png" /> <!--vrai bouton-->
        </div>
        <button style="right: 680px;">Accueil</button>

    </div>
 

При вызове идентификатора в CSS вы должны использовать «#» вместо «.» — который используется для классов.

Другими словами, чтобы продолжить ваше объявление и фактически увидеть результат, вам нужно будет написать:

 #boutonachat { /*construction d'un bouton avec faux fond*/
    display: block;
    height: 45px;
    width: 150px;
    position: absolute;
    top: 1.9em;
    z-index: 1;
    font-size: 16px;
}
 

Встроенный стиль для цвета:

  <button style="right: 80px; background-color: red;">Billets</button>
 

Если вы хотите применить разные цвета, я бы просто сослался на них с помощью «button: nth-of-type (1): hover»