Запретить CSS подчеркивание анимации при наведении курсора на указанную ссылку c, при этом разрешив ее для других <a>элементов - PullRequest
Новая
       11

Запретить CSS подчеркивание анимации при наведении курсора на указанную ссылку c, при этом разрешив ее для других <a>элементов

0 голосов
/ 26 апреля 2020

Я проектирую сайт, используя шаблон навигационной панели, который я сделал некоторое время go. Когда я создавал этот шаблон, в документе не было других ссылок, но теперь, поскольку я использую его на полном сайте, они есть. Когда вы наводите курсор на нормальную ссылку, цвет остается прежним, но анимация подчеркивания CSS проигрывается. Это также должно происходить для ссылок в навигационной панели, кроме одной - названия сайта. После добавления следующего к моему CSS анимация подчеркивания начала воспроизводиться при наведении курсора на заголовок (.link есть сейчас, потому что я добавил класс с таким именем ко всем ссылкам, не относящимся к навигационной панели, чтобы попытаться это исправить, увы безрезультатно): 

a.link {
  color: #5dc0e6;
  position: relative;
  text-decoration: none;
}

a.link:hover {
  color: #5dc0e6;
}

a.link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #5dc0e6;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a.link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

Понятия не имею, что делать на этом этапе. Как я уже сказал, я попробовал класс по всем ссылкам, не относящимся к Navbar, но это не сработало. Я в полном недоумении. Это CSS для названия сайта: 

ul.title {
      list-style-type: none;
      margin: 0;
      padding: 20;
      overflow: hidden;
    background-image: url('https://cdn.pixabay.com/photo/2016/08/12/05/06/technology-1587673_960_720.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
      background-color: #e6e5e6;
      font-size: 30px;
    text-transform: uppercase;
      letter-spacing: 5px;
      position: static;
}

Вот весь документ HTML (слегка отредактированный для удаления информации о сайте): 

<html>
<!DOCTYPE html>
    <head>
        <title>Home &mdash; Site Title</title>
        <link href="media/favicon.ico" rel="shortcut icon" />
        <link href="css/index.css" rel="stylesheet" />
        <link href="https://fonts.googleapis.com/css?family=Archivo:500,700" rel="stylesheet" />
    </head>
    <body>
        <ul class="title">
          <li><a class="link st" href="/"><font color="#e5e6e5">Site Title</font></a></li>
        </ul>
        <ul>
            <li><a class="nav-item" href="/">Home</a></li>
            <li><a class="nav-item" href="#">About</a></li>
            <li><a class="nav-item" href="#">Sites</a></li>
            <li><a class="nav-item" href="#">Contact</a></li>
        </ul>
        <p>Welcome to my site! More will be available soon...<br>
        <em>Developed by <a class="link" href="#">Developer</a></em>.</p>
    </body>
</html>

Любая помощь будет приветствуется.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 26 апреля 2020

Я добавил фрагмент, чтобы проиллюстрировать то, что, я думаю, вы ищете. :) 

a:not(.nope) {
  color: #5dc0e6;
  position: relative;
  text-decoration: none;
}

a:not(.nope):hover {
  color: #5dc0e6;
}

a.nope {
  color: red;
  text-decoration: none;
  text-transform: uppercase;
}

a:not(.nope):before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #5dc0e6;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a:not(.nope):hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}

ul.title {
      list-style-type: none;
      margin: 0;
      padding: 20;
      overflow: hidden;
    background-image: url('https://cdn.pixabay.com/photo/2016/08/12/05/06/technology-1587673_960_720.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
      background-color: #e6e5e6;
      font-size: 30px;
    text-transform: uppercase;
      letter-spacing: 5px;
      position: static;
}

ul {
  list-style-type: none;
}

ul a:not(.nope) {

}
<ul class="title">
          <li><a class="link nope" href="/"><font color="#e5e6e5">Site Title</font></a></li>
        </ul>
        <ul>
            <li><a class="nav-item" href="/">Home</a></li>
            <li><a class="nav-item" href="#">About</a></li>
            <li><a class="nav-item" href="#">Sites</a></li>
            <li><a class="nav-item" href="#">Contact</a></li>
        </ul>
        <p>Welcome to my site! More will be available soon...<br>
        <em>Developed by <a class="link" href="#">Developer</a></em>.</p>

Вы ищете :not() в css. Просто добавьте пользовательский класс к одной ссылке, и в стили ссылок добавьте :not(.custom-link) в стиль a. Если вы предоставите HTML, я могу показать вам, как, отредактировав мой ответ. :)

0 голосов
/ 26 апреля 2020

Поскольку заголовок страницы является единственной ссылкой, которая ведет себя не так, как другие; Я думаю, что простым решением было бы использовать другое имя класса для заголовка. Возможно .title, тогда не добавляйте анимационную часть к нему; 

a.link, a.title {
  color: #5dc0e6;
  position: relative;
  text-decoration: none;
}

a.link:hover, a.title {
  color: #5dc0e6;
}

a.link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #5dc0e6;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

a.link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...