0

"Не подскажете, как сделать так, чтобы при наведение на элемент менял цвет, а остальные элементы затемнялись."

Хорошо, пойду проще, есть меню, в нем 5 элементов, наводя на один элемент курсор, он у меня меняет цвет, а остальные элементы в меню меняли цвет на другой.

Нету наработок, мне принцип понять. Если так будет проще, то вот список из 5 элементов

<div class="nav">
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </div>
4
  • 3
    у вас есть наработки от которых можно оттолкнуться? 13 ноя 2018 в 13:02
  • Знаешь scss? я понял, что ты имел ввиду 13 ноя 2018 в 13:49
  • Нет, scss не знаю 13 ноя 2018 в 13:51
  • Хорошая штука!!! Рекомендую почитать. Это тот же css, только проще 13 ноя 2018 в 14:02

2 ответа 2

1

Как я понял ты хотел добиться этого:
(расскрой код и запусти его)

.nav ul:hover li > a {
  color: grey;
}
.nav ul li a {
  text-decoration: none;
  color: black;
  transition: all .2s ease-in-out;
}
.nav ul li a:hover {
  color: red;
}
<div class="nav">
    <ul>
        <li><a href="">Первое</a></li>
        <li><a href="">Второе</a></li>
        <li><a href="">Третье</a></li>
        <li><a href="">Четвертое</a></li>
        <li><a href="">Пятое</a></li>
    </ul>
</div>

Как реализовал я это в SCSS:

.nav{
  ul{
    &:hover li > a{
      color: grey;
    }
    li{
      a{
        text-decoration: none;
        color: black;
        transition: all .2s ease-in-out;

        &:hover{
          color: red;
        }
      }
    }
  }
}

Как SCSS "переводит" код в нормальный CSS:

.nav ul:hover li > a {
  color: grey;
}
.nav ul li a {
  text-decoration: none;
  color: black;
  transition: all .2s ease-in-out;
}
.nav ul li a:hover {
  color: red;
}
4
  • Спасибо, я думаю пока мне надо уверено себя чувствовать в css, без sass, less и т.д. 13 ноя 2018 в 14:10
  • @GlebPristupa но я настоятельно рекомендую потом это пройти! очень поможет в будущем 13 ноя 2018 в 14:29
  • это и есть sass? 13 ноя 2018 в 14:41
  • @GlebPristupa ну по сути да. SASS/SCSS, но SCSS, на мой взгляд, удобнее 13 ноя 2018 в 15:16
1

.nav ul {
    box-sizing: border-box;
    padding: 0;
    background: grey;
    list-style-type: none;
    display: flex;
}

.nav ul:hover {
    background: lightgray;
    color: blue;
}

.nav li {
    flex-grow: 1;
}

.nav a {
    display: block;
    color: red;
    text-decoration: none;
    padding: 20px;
    border: 1px solid black;
}

.nav a:hover {
    color: blue;
    background: gray;
}
<div class="nav">
    <ul>
       <li><a href="#">1</a></li>
       <li><a href="#">2</a></li>
       <li><a href="#">3</a></li>
       <li><a href="#">4</a></li>
       <li><a href="#">5</a></li>
    </ul>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.