При отключении якоря будут работать как гиперссылки - PullRequest
Новая
       8

При отключении якоря будут работать как гиперссылки

0 голосов
/ 01 октября 2018

Мой якорь даже после применения к нему стилей CSS, когда он отключен, по-прежнему действует как гиперссылка.Меняет цвет при наведении.

enter image description here enter image description here

Я уже потратил некоторое время на это и почти разочаровался вэтот.Я хочу, чтобы увеличительное стекло вообще не меняло цвет после наведения на него.

Это якорь 

 <a href="" class="postcode-search-icon clickable"
            ng-click="searchPostcode()" ng-disabled="true" title="Search Postcode">
 </a href="">

И мои текущие стили CSS пытаются исправить это 

.postcode-search-icon[disabled], .postcode-search-icon[disabled]:hover {
   text-decoration: none;
   cursor: not-allowed;
   background-color: transparent;
}

Что я делаю не так?

В случае, если вам интересно, кликабельный класс - это просто так, это не имеет значения 

.clickable {
    cursor: pointer;
}

@ edit

Похоже, что применение цвета: (оригинальный цвет) делает временный обходной путь, пока я не найду что-то лучшее.

Ответы [ 2 ]

0 голосов
/ 01 октября 2018

Если вы используете Angular, вы сможете использовать условный класс с атрибутом ngClass .Не уверен, что вы используете Angular 2, 3, 4, 5 или JS (вот ссылка JS для ng-class ).

Думаю, я бы превратил кликабельный элемент вКнопка, а также. 

.bright:hover {
  color: #0066ff;
  cursor: pointer;
}

.dim:hover {
  color: #ccc;
  cursor: default;
}

<button ng-class="{bright: enabled, dim: disabled}"><i class="search-icon"></i> Search</button>
0 голосов
/ 01 октября 2018

Кажется, ваш селектор CSS неправильный.Псевдокласс disabled работает только с полями ввода, а не с якорями. 

input[disabled="disabled"], input.disabled {
    /* whatever you want */
}

Кроме того, как вы справляетесь с добавлением класса clickable, вам нужно справиться с этим, чтобы непереопределить стили.

...