Почему оформление текста не работает в моем коде?

ProgramBox

Почему оформление текста не работает в моем коде?

Post author:admin
Запись опубликована:17 февраля, 2023
Post category:Вопросы по программированию

#html #css #text-decorations

#HTML #css #оформление текста

Вопрос:

‘элемент списка 2’ в моем коде не имеет гиперссылки, подчеркнутой в выпадающей гиперссылке, пока я не наведу на нее курсор. Это то, чего я ожидаю и хочу, чтобы это делало.

Проблема в том, что когда я пытаюсь добавить более одной гиперссылки к выпадающим ссылкам, как показано в «элементе списка 1», обе гиперссылки подчеркиваются, прежде чем я наведу на них курсор.

Мне пришлось поместить ссылку 1 и 2 для «элемента списка 1» внутри a, потому что без этого ссылки 1 и 2 перекрывают друг друга. Если я добавлю <br> между ними при перекрытии, это также повлияет на «элемент списка 2», нажав на него.

Чтобы было ясно, я хочу, чтобы «элемент списка 1» и «элемент списка 2» были на одном уровне, и все ссылки не подчеркивались, пока я не наведу на них курсор.

Я искал в Интернете, и, похоже, проблемы с «оформлением текста: нет» довольно распространены, но я не смог найти никакого решения моей конкретной проблемы.

В моем примере я оставил атрибуты href пустыми, поскольку то, на что они ссылаются, здесь не важно.

 ul {
  list-style-type: none;
}

a:hover {
  text-decoration: underline;
}

.dropdown {
  display: inline-block;
  width: 100px;
  height: 25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
  text-decoration: none;
}

.dropdown:hover .dropdown-content {
  display: block;
}

 <ul>
  <div class="dropdown">
    <li>list item 1</li>
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a><br>
      <a href="" target="_blank">link 2</a>
    </div>
  </div>

  <div class="dropdown">
    <li>list item 2</li>
    <a class="dropdown-content" href="" target="_blank">link 1</a>
  </div>

Ответ №1:

Вам нужно настроить таргетинг на a элемент, чтобы вы могли использовать дополнительную оболочку в обеих ситуациях и настроить CSS, как показано ниже:

Я также исправил недопустимый HTML, поскольку вам разрешено использовать только li как дочерний элемент ul

 ul {
  list-style-type: none;
}

.dropdown {
  display: inline-block;
  width: 100px;
  height: 25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
}

.dropdown-content a {
  text-decoration: none;
}

.dropdown-content a:hover {
  text-decoration: underline;
}

.dropdown:hover .dropdown-content {
  display: block;
}

 <ul>
  <li class="dropdown">list item 1
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a><br>
      <a href="" target="_blank">link 2</a>
    </div>
  </li>

  <li class="dropdown">list item 2
    <div class="dropdown-content">
      <a href="" target="_blank">link 1</a>
    </div>
  </li>
</ul>

1. Поскольку ‘dropdown-content’ изменяет цвет фона и заполнение элемента a, почему оформление текста в ‘dropdown-content’ также не изменяет оформление текста элемента? Почему мне нужно вместо этого создать «выпадающий список содержимого a»?

2. @Steve потому что браузер (агент пользователя) применяет к a элементу стиль по умолчанию. Поэтому применения оформления текста к раскрывающемуся содержимому недостаточно. Вам нужно переопределить стиль по умолчанию, настроив a элементы

Ответ №2:

Настройте эти css, вам нужно добавить css для .dropdown-content a и перейти a:hover к end

 .dropdown-content a{
  text-decoration: none ;
  }

  a:hover {
  text-decoration: underline ;
}

 <!DOCTYPE html>

<html>
<head>
<style>
  ul {
  list-style-type:none;
}



.dropdown {
  display: inline-block;
  width:100px;
  height:25px;
  background-color: black;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 20px;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  padding: 12px 16px;
  text-decoration: none ;
 }
 
 .dropdown-content a{
  text-decoration: none ;
  }
  
  a:hover {
  text-decoration: underline ;
}
 

.dropdown:hover .dropdown-content {display: block;}
</style>
</head>
<body>


<ul>
<div class="dropdown">
  <li>list item 1</li>
    <div class="dropdown-content">
    <a href="" target="_blank">link 1</a><br>
    <a href="" target="_blank">link 2</a>
    </div>
</div>

<div class="dropdown">
  <li>list item 2</li>
  <a class="dropdown-content" href="" target="_blank">link 1</a>
</div>

 </body>
</html>

1. Кроме того, можно было бы также воспользоваться псевдоселектором :not (в зависимости от требуемой поддержки браузера). Если вы напишете:not(:hover) , порядок правил не имеет значения, и было бы более понятно, если бы вы просто посмотрели на первое.

2. Здравствуйте и спасибо за помощь. Я не знал, что порядок css-кода имеет значение (новичок в этом), поэтому я постараюсь помнить об этом на будущее. Я не совсем понимаю, зачем мне нужен ‘.dropdown-content a’. Поскольку тег <div class=»dropdown-content»> изменяет цвет фона и заполнение двух тегов <a>, почему он также не изменяет оформление текста на none ?