Может кто-нибудь помочь мне с тегом hover? - PullRequest
Новая
       0

Может кто-нибудь помочь мне с тегом hover?

0 голосов
/ 18 марта 2020

Я пытаюсь заставить эту строку кода зависать, но она не зависает в том месте, где я хочу, чтобы она висела. Он парит на одной линии. Вот код для html и css, которые у меня есть.
css: 

.whitebox:hover{
  background: #a60505;
  width: 150px;
  height: 110px;
}
<div class="whitebox"> 
  <h2> <a href="partsofdw.html" <br>
   Different <br>
   Parts of the <br>
   Internet </a></h2>
</div>

Вместо того, чтобы только выполнять команду для div, когда я наводю курсор мыши на ту же строку, он выполняет код, и я не понимаю, почему. Вот изображение, чтобы показать, что происходит:
enter image description here

Ответы [ 4 ]

2 голосов
/ 18 марта 2020

Я отредактировал OP, обнаружил отсутствующий тег div из-за неправильного форматирования.

Я также обнаружил, используя фрагмент, что в теге a отсутствует >. Это может быть частью проблемы.

Основная проблема заключается в том, что вы не должны присваивать значения размера для :hover, а для самого класса. См. CSS код ниже.

Однако я бы предложил использовать display: inline-block - чтобы настроить элемент .whitebox для его содержимого - вместо использования height и width, а также настроить поля вашего h2, чтобы лучше контролировать интервал.

Примечание: я также удалил первый <br/>. 

.whitebox {
   display: inline-block;
   /*
   width: 150px;
   height: 110px;
   */
}

.whitebox:hover {
  background: #a60505;
}

.whitebox > h2 {
  margin: 1rem; /* the font size of your body */
}
<div class="whitebox"> 
  <h2> <a href="partsofdw.html"> <!-- <br> -->
   Different <br>
   Parts of the <br>
   Internet </a></h2>
</div>
0 голосов
/ 18 марта 2020

Пожалуйста, попробуйте этот код, чтобы навести курсор на содержимое: 

<!DOCTYPE html>
<html>
<head>
<style>
   h2:hover{
    background: #a60505;
    width: 150px;
    height: 110px;
}
</style>
</head>
<body>
    <div>
       <h2>
       <a href="partsofdw.html"><br>
       Different <br>
       Parts of the <br>
       Internet 
       </a>
      </h2>
    </div>
</body>
</html>

Надеюсь, приведенный выше код будет вам полезен.

Спасибо.

0 голосов
/ 18 марта 2020

Ваш код HTML необходимо отредактировать. Потому что у вас нет класса whitebox, и у него есть некоторые синтаксические ошибки! Я исправил это для тебя! 

.whitebox:hover{
  background: #a60505;
  width: 150px;
  height: 110px;
}
<div class="whitebox">
  <h2> 
    <a href="partsofdw.html">
      Different <br>
      Parts of the <br>
      Internet 
     </a>
  </h2>
</div>
0 голосов
/ 18 марта 2020

Попробуйте этот ответ, и если это не сработает, поделитесь полным кодом: 

CSS:

  .whitebox:hover{
    background: #a60505;
    width: 150px;
    height: 110px;
}

HTML:
    <div class="whitebox">
       <h2> <a href="partsofdw.html" <br>
       Different <br>
       Parts of the <br>
       Internet </a></h2>
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...