Создание Navbar, где каждая ссылка имеет свой цвет при наведении

Question

Создание Navbar, где каждая ссылка имеет свой цвет при наведении

0

Попытка изменить отдельные ссылки в navbar на разные цвета при зависании. Кажется, это не понятно.

HTML:

<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
   <ul class="nav navbar-nav">

<!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#HOME"></a>
                </li>
                <li class="page-scroll">
                    <a href="#link1">1</a>
                </li>
                <li class="page-scroll">
                    <a href="#link2">2</a>
                </li>
                <li class="page-scroll">
                    <a href="#link3">3</a>
                </li>
                <li class="page-scroll">
                    <a href="#link4">4</a>
                </li>
            </ul>
        </div>

CSS:

.navbar-custom li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active 
{
outline: 0;
background-color: #bdc3c7 !important;
color: #fff;
}

Установите текущие ссылки на красный. Но хотелось бы, чтобы каждая отдельная ссылка имела другой цвет. Например, Link1 = Красный, Link2 = Синий.

У меня проблемы с этим! Помогите оценить!

Благодарю!

luke 17 фев. 2014, в 00:11

Источник

0

См. Stackoverflow.com/questions/8716686/…
Jatin 16 фев. 2014, в 23:14

Теги:

html

css

hyperlink

hover

navbar

4 ответа

2

Да, просто нужно их class однозначно

HTML

        <li class="hidden colour1">
            <a href="#HOME"></a>
        </li>
        <li class="page-scroll colour2">
            <a href="#link1">1</a>
        </li>
        <li class="page-scroll colour3">
            <a href="#link2">2</a>
        </li>

CSS:

.colour1:hover { background-color:blue; }
.colour2:hover { background-color:red; }
.colour3:hover { background-color:green; }

Rob Sedgwick 16 фев. 2014, в 20:59

1

Вам нужно будет назначить свой CSS для каждого отдельного класса и дать разную ссылку другому классу

как

.pagescroll1{

}
.pagescroll2{

}

и вызов их из вашего HTML

user3311898 16 фев. 2014, в 21:03

0

Элегантным решением является выбор по значению атрибута. пример для первого:

a[href="#link1"]:hover,
a[href="#link1"]:active,
{
  outline: 0;
  background-color: #bdc3c7 !important;
  color: #fff;
}

однако это работает только тогда, когда вы непосредственно выбираете a-элементы. Когда ваш третий селектор li.active, в этом элементе нет информации о том, где он связан. в этом случае вам придется добавлять классы, как было предложено rob.

Tobl 16 фев. 2014, в 20:38

Ещё вопросы

JustinHo · Accepted Answer · 2014-02-16T22-55-00.000Z

если вы используете SASS, это может быть сделано более чистым способом, как это в вашем файле scss:

$colors: (1: red, 2: blue, 3: yellow, 4: black);

@each $anchor, $color in $colors {
   #{".navbar-custom .nav li:nth-child("+ (1 + $anchor) + ") a:hover"} {
       background-color: $color;
    }
}

который будет генерировать CSS:

.navbar-custom .nav li:nth-child(2) a:hover {
  background-color: red;
}

.navbar-custom .nav li:nth-child(3) a:hover {
  background-color: blue;
}

.navbar-custom .nav li:nth-child(4) a:hover {
  background-color: yellow;
}

.navbar-custom .nav li:nth-child(5) a:hover {
  background-color: black;
}

Теперь вы можете добавить столько разных цветов для всех своих ссылок и позволить SASS генерировать CSS для вас.

классно. просто добавил в мой scss и отрегулировал цвет и бум. Спасибо чувак.