Изменение текста кнопки при наведении - PullRequest
Новая
       6

Изменение текста кнопки при наведении

0 голосов
/ 17 января 2019

Я пытаюсь изменить текст кнопки при наведении на нее, я нашел решение, но по какой-то причине оно не сработает.

Я хочу, чтобы, когда я наведу на него курсор, он загорелся зеленым и изменил текст на Completed!.

В настоящее время кнопка меняет цвет при наведении на нее текста, но текст не изменится.

Вот мой css: 

.button {
     border: 0px solid #004B84;
     background: red;
     padding: 3px 21px;
     -webkit-border-radius: 16px;
     -moz-border-radius: 16px;
     border-radius: 16px;
     color: #ffffff;
     font-size: 12px;
     font-family: Questrial;
     text-decoration: none;
     vertical-align: middle;
     letter-spacing: 2px;
    }
   
   .button:hover {
     border: 0px solid #1292e1;
     background: green;
     color: white !important;
     content: "Completed!" !important;
    }
   
   .button:active {
     background: #1292e1;
     color: white;
     text-decoration: none !important; 
    }
<button class="button" type="submit" name="completed" value="">New Request</button>

А вот HTML-код для кнопки:

<button class="button" type="submit" name="completed" value="">New Request</button>

Ответы [ 6 ]

0 голосов
/ 18 января 2019

@ K. Роджерс Попробуйте код Надеюсь, это сработает для вас! 

    /* .button */
    .button {
      display: inline-block;
      position: relative;
      border: 0px solid #004B84;
      background: red;
      padding: 8px 25px;
      -webkit-border-radius: 16px;
      -moz-border-radius: 16px;
      border-radius: 16px;
      color: #ffffff;
      font-size: 12px;
      font-family: Questrial;
      text-decoration: none;
      vertical-align: middle;
      letter-spacing: 2px;
      overflow: hidden;
    }
    .button:hover { background: green; }
    .button span {
        transition: 0.6s;
        transition-delay: 0.2s;
    }
    .button:before,
    .button:after {
        content: '';
        position: absolute;
        top: 0.67em;
        left: 0;
        width: 100%;
        text-align: center;
        opacity: 0;
        transition: .4s,opacity .6s;
    }

    /* :before */
    .button:before {
        content: attr(data-hover);
        transform: translate(-150%,0);
    }
    /* :after */
    .button:after {
      content: attr(data-active);
      transform: translate(150%,0);
    }
    /* Span on :hover and :active */
    .button:hover span,
    .button:active span {
        opacity: 0;
        transform: scale(0.3);
    }
    /* :before pseudo-element on :hover 
        and :after pseudo-element on :active */
    .button:hover:before,
    .button:active:after {
        opacity: 1;
        transform: translate(0,0);
        transition-delay: .4s;
    }
    .button:active:before {
        transform: translate(-150%,0);
        transition-delay: 0s;
    }
   <button class="button" type="button" data-hover="COMPLETED" data-active="I'M ACTIVE"><span>New Request </span></button>
0 голосов
/ 17 января 2019

См:

https://www.w3schools.com/cssref/pr_gen_content.asp

Свойство content используется с :: before и :: after псевдоэлементы, для вставки сгенерированного контента.

Вам понадобится Javascript или более.

1012 *, например * 

<button class="button" type="submit" name="completed" value="" onmouseover="document.getElementsByName('completed')[0].innerHTML ='Completed!';" onmouseleave="document.getElementsByName('completed')[0].innerHTML ='New Request';">New Request</button>
0 голосов
/ 17 января 2019

Вот еще одно решение без кнопки изменения html-кода. Просто используя стиль псевдоэлемента CSS ::after Чтобы предотвратить изменение ширины кнопки при наведении, необходимо определить свойство width. 

.button {
     border: 0px solid #004B84;
     min-width: 150px;
     background: red;
     padding: 5px 21px;
     -webkit-border-radius: 16px;
     -moz-border-radius: 16px;
     border-radius: 16px;
     color: #ffffff;
     font-size: 12px;
     font-family: Questrial;
     text-decoration: none;
     vertical-align: middle;
     letter-spacing: 2px;
     }
   .button:hover {
      background: green;
   }
   .button::after {
      content: "New request!";
    }
    
    .button:hover::after {
       content: "Completed!";
    }
   
   .button:active {
     background: #1292e1;
    }
    .button:active::after {
      background: #1292e1;
    }
<button class="button" type="submit" name="completed" value=""></button>
0 голосов
/ 17 января 2019

CSS (без HTML):

Вам не нужно трогать HTML (добавление тегов <span> вручную, вручную удаление содержимого элемента HTML и т. д.).

Просто установите текстовое содержимое кнопки font-size на 0px, затем добавьте свой собственный текст и размер шрифта для кнопки, используя :hover, ::after и ::after:hover.

Проверьте и запустите следующий Фрагмент кода для практического примера использования только CSS для редактирования содержимого вашей кнопки: 

.button {font-size: 0px;min-width: 100px;min-height: 22px;}
.button::after {font-size: 14px;}

.button::after {
content: "New Request";
}
.button:hover::after {
 content: "Completed!";
}

.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>

JavaScript:

Просто используйте свойство textContent () , чтобы изменить текст при наведении курсора (mouseover) на Completed и вернуться к New Request, когда вылетел (mouseout).

Проверьте и запустите следующий Фрагмент кода для практического примера вышеуказанного подхода JavaScript: 

var btn = document.querySelector(".button");

btn.addEventListener("mouseover", function() {
  this.textContent = "Completed!";
})
btn.addEventListener("mouseout", function() {
  this.textContent = "New Request";
})
.button {
  min-width: 100px;
  min-height: 22px;
}

.button:hover {
background-color: green;
border: 0px solid #1292e1;
color: white !important;
}
<button class="button" type="submit" name="completed" value="">New Request</button>
0 голосов
/ 17 января 2019

Вы можете сделать это, используя элемент psuedo. 

.button {
  width: 150px; /* set a width so it doesnt change upon hover */
   border: 0px solid #004B84;
   background: red;
   padding: 3px 21px;
   -webkit-border-radius: 16px;
   -moz-border-radius: 16px;
   border-radius: 16px;
   color: #ffffff;
   font-size: 12px;
   font-family: Questrial;
   text-decoration: none;
   vertical-align: middle;
   letter-spacing: 2px;
}

.button:hover span {
  display:none
}

.button:hover:before {
  content:"Completed!";
}

.button:hover {
  background-color: green;
}
<button class="button">
 <span>New request</span>
</button>
0 голосов
/ 17 января 2019

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

Edit: Похоже, что есть способ:

Как заменить текст на CSS?

...