При hover нужен не прозрачный фон на полупрозрачном

Question

В шапке сайта полупрозрачная полоса с кнопками названия разделов. Нужно, чтобы при наведении на раздел изменялся фон кнопки и её текст. Примерный код:

HTML

<div class="header">
      <button class="btn">Каталог</button>
    </div>
    <div class="main">
    </div>

CSS

.header {
margin-bottom: 10px;
padding: 10px;
width: 200px;
height: 50px;
background-color: black;
opacity: .5;
}
.btn {
color: white;
background-color: transparent;
}
.btn:hover {
width: auto;
height: auto;
color: black;
background-color: purple;
}
.main {
width: 100px;
height: 20px;
border: 1px solid black;
background-color: purple;
}

Answer 1

У вас хедер имеет opacity: .5; - это значит, что и он, и все абсолютно элементы внутри него будут полупрозрачными. даже при наведении.

для того, чтобы сделать что-то полупрозрачным чисто с визуальной целью, правильнее применять прозрачность для фонового цвета:

background-color: black; -> background-color: RGBA(0,0,0,0.5);

тогда собственно прозрачность (opacity) убираете и делаете кнопки как вам надо.

Answer 2

Стили сделал, а что-то текст кнопки менялся нужно применить js или jQuery

.header {
margin-bottom: 10px;
padding: 10px;
width: 200px;
height: 50px;
background-color: black;
opacity: .5;
}
.btn {
color: white;
background-color: transparent;
}
.header:hover > .btn {
  color: black;
  background-color: purple;
}
.btn:hover {
width: auto;
height: auto;
color: black;
background-color: purple;
cursor: pointer;
}
.main {
width: 100px;
height: 20px;
border: 1px solid black;
background-color: purple;
}

<div class="header">
      <button class="btn">Каталог</button>
    </div>
    <div class="main">
    </div>

БЛОГ НА HUSL

При hover нужен не прозрачный фон на полупрозрачном

Ответы (2 шт):