CSS - эффект наведения не работает

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

Я копирую код, который получил здесь, и добавляю его в класс .hover, но ничего не происходит.

HTML:

<?php include('server.php') ?>
<!DOCTYPE html>
<html >
<head>
    <title>Log In</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body style = "background-image: url('./image5.jpg'); background-size: 100% 100vh; ">

    <div class = "hover">

            <div class = "header" style = "background: rgba(76, 175, 80, 0.1);">
            <h2 style = "color:   #FFFACD;">Register</h2>
            </div>

            <form method = "post" action = "register.php" style = "background: rgba(76, 175, 80, 0.2);" >

            <?php include('errors.php'); ?>

            <div class = "input-group" >
                <label style = "color:    #FFFACD;">Username</label>
                <input type = "text" name = "username" value = "<?php echo $username; ?>" style = "background: rgba(0, 0, 250, 0.1);" >
            </div>
            <div class = "input-group">
                <label style = "color:    #FFFACD;">Email</label>
                <input type = "email" name = "email" value = "<?php echo $email; ?>" style = "background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class = "input-group">
                <label style = "color:    #FFFACD;">Password</label>
                <input type = "password" name = "password_1" style = "background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class = "input-group">
                <label style = "color:    #FFFACD;">Confirm password</label>
                <input type = "password" name = "password_2" style = "background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class = "input-group">
                <button type = "submit" class = "btn" name = "reg_user" style = "background: rgba(0, 0, 250, 0.1);">Register</button>
            </div>
            <p style = "color:    #FFFACD;">
                Already a member? <a href = "login.php" style = "color: #6495ED;">Sign in</a>
            </p>
            </form>

    </div>
</body>
</html>

CSS:

* {
    margin: 0px;
    padding: 0px;
}
body {
    font-size: 120%;
    background: #F8F8FF;
}

.header {
    width: 30%;
    margin: 50px auto 0px;
    color: white;
    background: #5F9EA0;
    text-align: center;
    border: 1px solid #B0C4DE;
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    padding: 20px;
}

.hover {
  /*display: inline-block;   - I exclude this because of display issue */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

form, .content {
    width: 30%;
    margin: 0px auto;
    padding: 20px;
    border: 1px solid #B0C4DE;
    background: white;
    border-radius: 0px 0px 10px 10px;
}
.input-group {
    margin: 10px 0px 10px 0px;
}

.input-group label {
    display: block;
    text-align: left;
    margin: 3px;
}
.input-group input {
    height: 30px;
    width: 93%;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid gray;
}
.btn {
    padding: 10px;
    font-size: 15px;
    color: white;
    background: #5F9EA0;
    border: none;
    border-radius: 5px;
}
.error {
    width: 92%; 
    margin: 0px auto; 
    padding: 10px; 
    border: 1px solid #a94442; 
    color: #a94442; 
    background: #f2dede; 
    border-radius: 5px; 
    text-align: left;
}
.success {
    color: #3c763d; 
    background: #dff0d8; 
    border: 1px solid #3c763d;
    margin-bottom: 20px;
}

Или вы можете попробовать, как .hover:hover, .hover:focus, .hover:active { -webkit-transform: scale(1.1); transform: scale(1.1); }

— 27.08.2018 07:52

html css hover

27.08.2018 07:49

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 525

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Если вы хотите использовать некоторые свойства css для элемента, сделайте это следующим образом

    .some_class_name:hover {
      /* css properties */
     }

Применение класса с именем hover просто добавит все свойства к элементу, у которого вы не получите эффекта наведения.

Узнать больше о парить

27.08.2018 07:54

Ответ принят как подходящий

Вам также необходимо включить этот селектор:

.hvr-grow:hover, .hvr-grow:focus, .hvr-grow:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

Результаты:

* {
    margin: 0px;
    padding: 0px;
}
body {
    font-size: 120%;
    background: #F8F8FF;
}

.header {
    color: white;
    background: #5F9EA0;
    text-align: center;
    border: 1px solid #B0C4DE;
    border-bottom: none;
    border-radius: 10px 10px 0px 0px;
    padding: 20px;
}

.hover {
  /*display: inline-block;   - I exclude this because of display issue */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
    width: 30%;
    margin: 50px auto 0px;
}

.hover:hover, .hover:focus, .hover:active {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

form, .content {
    padding: 20px;
    border: 1px solid #B0C4DE;
    background: white;
    border-radius: 0px 0px 10px 10px;
}
.input-group {
    margin: 10px 0px 10px 0px;
}

.input-group label {
    display: block;
    text-align: left;
    margin: 3px;
}
.input-group input {
    height: 30px;
    width: 93%;
    padding: 5px 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid gray;
}
.btn {
    padding: 10px;
    font-size: 15px;
    color: white;
    background: #5F9EA0;
    border: none;
    border-radius: 5px;
}
.error {
    width: 92%; 
    margin: 0px auto; 
    padding: 10px; 
    border: 1px solid #a94442; 
    color: #a94442; 
    background: #f2dede; 
    border-radius: 5px; 
    text-align: left;
}
.success {
    color: #3c763d; 
    background: #dff0d8; 
    border: 1px solid #3c763d;
    margin-bottom: 20px;
}

<html >
<head>
    <title>Log In</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body style = "background-image: url('./image5.jpg'); background-size: 100% 100vh; ">

    <div class = "hover">

            <div class = "header" style = "background: rgba(76, 175, 80, 0.1);">
            <h2 style = "color:   #FFFACD;">Register</h2>
            </div>

            <form method = "post" action = "register.php" style = "background: rgba(76, 175, 80, 0.2);" >

            <?php include('errors.php'); ?>

            <div class = "input-group" >
                <label style = "color:    #FFFACD;">Username</label>
                <input type = "text" name = "username" value = "<?php echo $username; ?>" style = "background: rgba(0, 0, 250, 0.1);" >
            </div>
            <div class = "input-group">
                <label style = "color:    #FFFACD;">Email</label>
                <input type = "email" name = "email" value = "<?php echo $email; ?>" style = "background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class = "input-group">
                <label style = "color:    #FFFACD;">Password</label>
                <input type = "password" name = "password_1" style = "background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class = "input-group">
                <label style = "color:    #FFFACD;">Confirm password</label>
                <input type = "password" name = "password_2" style = "background: rgba(0, 0, 250, 0.1);">
            </div>
            <div class = "input-group">
                <button type = "submit" class = "btn" name = "reg_user" style = "background: rgba(0, 0, 250, 0.1);">Register</button>
            </div>
            <p style = "color:    #FFFACD;">
                Already a member? <a href = "login.php" style = "color: #6495ED;">Sign in</a>
            </p>
            </form>

    </div>
</body>
</html>

Я завис за границей, но эффект уже наступил

— 27.08.2018 08:07

@lhiam Вы пытаетесь применить эффект наведения только к форме?

— 27.08.2018 08:16

Да, только внутри желтых линий.

— 27.08.2018 08:21

Обновлено! Проверь это сейчас.

— 27.08.2018 08:32

27.08.2018 07:54

Как вы написали это правило CSS, всегда будет применяться к элементу <div class = "hover">.

Вы хотите применить правило только тогда, когда пользователь наводит курсор на элемент. Вам нужно использовать :hover псевдокласс. Ваше правило должно выглядеть так:

.hover:hover {
    ...
}

Также может быть хорошей идеей использовать имя класса, описывающее элемент и то, что он содержит, вместо hover.

27.08.2018 07:55

То, как вы работаете с зависанием, крайне неверно. Вам необходимо вызвать на hover следующим образом: classname:hover. Такие элементы называются псевдоэлементами, которые всегда являются частью интерфейсной разработки. Узнайте о псевдоэлементах здесь

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 120%;
  background: #F8F8FF;
}

.header {
  width: 30%;
  margin: 50px auto 0px;
  color: white;
  background: #5F9EA0;
  text-align: center;
  border: 1px solid #B0C4DE;
  border-bottom: none;
  border-radius: 10px 10px 0px 0px;
  padding: 20px;
}
.hover:hover, .hover:focus, .hover:active {
  opacity:0.5;
}
.hover {
  /*display: inline-block;   - I exclude this because of display issue */
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;
}

form,
.content {
  width: 30%;
  margin: 0px auto;
  padding: 20px;
  border: 1px solid #B0C4DE;
  background: white;
  border-radius: 0px 0px 10px 10px;
}

.input-group {
  margin: 10px 0px 10px 0px;
}

.input-group label {
  display: block;
  text-align: left;
  margin: 3px;
}

.input-group input {
  height: 30px;
  width: 93%;
  padding: 5px 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid gray;
}

.btn {
  padding: 10px;
  font-size: 15px;
  color: white;
  background: #5F9EA0;
  border: none;
  border-radius: 5px;
}

.error {
  width: 92%;
  margin: 0px auto;
  padding: 10px;
  border: 1px solid #a94442;
  color: #a94442;
  background: #f2dede;
  border-radius: 5px;
  text-align: left;
}

.success {
  color: #3c763d;
  background: #dff0d8;
  border: 1px solid #3c763d;
  margin-bottom: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Log In</title>
  <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>

<body style = "background-image: url('./image5.jpg'); background-size: 100% 100vh; ">

  <div class = "hover">

    <div class = "header" style = "background: rgba(76, 175, 80, 0.1);">
      <h2 style = "color:   #FFFACD;">Register</h2>
    </div>

    <form method = "post" action = "register.php" style = "background: rgba(76, 175, 80, 0.2);">

      <?php include('errors.php'); ?>

      <div class = "input-group">
        <label style = "color:    #FFFACD;">Username</label>
        <input type = "text" name = "username" value = "<?php echo $username; ?>" style = "background: rgba(0, 0, 250, 0.1);">
      </div>
      <div class = "input-group">
        <label style = "color:    #FFFACD;">Email</label>
        <input type = "email" name = "email" value = "<?php echo $email; ?>" style = "background: rgba(0, 0, 250, 0.1);">
      </div>
      <div class = "input-group">
        <label style = "color:    #FFFACD;">Password</label>
        <input type = "password" name = "password_1" style = "background: rgba(0, 0, 250, 0.1);">
      </div>
      <div class = "input-group">
        <label style = "color:    #FFFACD;">Confirm password</label>
        <input type = "password" name = "password_2" style = "background: rgba(0, 0, 250, 0.1);">
      </div>
      <div class = "input-group">
        <button type = "submit" class = "btn" name = "reg_user" style = "background: rgba(0, 0, 250, 0.1);">Register</button>
      </div>
      <p style = "color:    #FFFACD;">
        Already a member? <a href = "login.php" style = "color: #6495ED;">Sign in</a>
      </p>
    </form>

  </div>
</body>

</html>

27.08.2018 07:56

Другие вопросы по теме

Не удается заставить Div заполнить всю ширину в Wordpress

Safari не загружает мой файл styles.min.css

Ошибка версии печати Google Chart в Edge?

Такие кнопки, как stopShow (), предыдущий и следующий, не будут работать в javascript

CSS Overflow auto и его работа

Svg animateMotion в конце прослушивателя событий

@ font-face - Использование нескольких файлов для одного шрифта

Липкая выпадающая панель навигации исчезает при переходе на маленький экран

Как скрыть / показать элементы HTML в зависимости от размера экрана?

Может ли bs4 анализировать тег с помощью <style = 'display: none;'>?

CSS - эффект наведения не работает

Ответы 4

Другие вопросы по теме

Похожие вопросы