BG Development


  Reply to this topicStart new topicStart Poll

> transition върху hover не връща обратно стила, След click, transiton не връща стила
GoyaGag
Публикувано на: 25-02-2024, 12:12
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 5
Регистриран на: 23.02.24



Привет!

Имам елементарен transition ефект на един бутон. Стила се променя при :hover.
Работи.
Докато не кликна върху бутона. Ако го направя, след като махна курсора от него, не връща стила обратно.
Ако не кликам, няма проблем.
Това е както при Firefox, така и при Chrome.

CODE

   <body><div class="container">
     <div class="form-container">
       <input
         type="text"
         class="input-text"
         placeholder="Max 25 characters"
         maxlength="25"
       />
       <button href="#">Button</button>
     </div>
   </body>

CODE

*,
*::before,
*::after {
 box-sizing: border-box;
}

body {
   display: flex;
   justify-content: center;
   align-items: center;
}

.form-container {
   width: 20rem;
   background-color: #959595;
   padding: 0 0.125rem 0.125rem 0.125rem;
   font-family: "Roboto", "Ariel";
   font-size: 1rem;
   border-radius: 0.1875rem;
}

.input-text{
   display: block;
   background-color: #ececec;
   color: #7f7f7f;
   width: 100%;
   border: solid 0.125rem;
   border-color: white;
   border-radius: 0.125rem;
   padding: 0.3125rem 0.625rem;
   margin: 0.125rem 0;
   transition: 0.2s
}

.input-text:focus {
   outline: none;
   width: 100%;
   border: solid 0.125rem;
   border-color: white;
   background-color: white;
   box-shadow: inset 0 0 0.25rem #0055ff;
 }

.input-text:hover::placeholder {
   color: #555555;
}

button {
   background-color: white;
   color: #0055ff;
   text-decoration: none;
   width: 100%;
   border: none;
   border-radius: 0.125rem;
   padding: 0.3125rem 0.625rem;
   font-weight: 500;
   transition: all 0.2s;
}

button:hover,
button:focus {
   font-weight: 700;
   cursor: pointer;
}


Това мнение е било редактирано от GoyaGag на 25-02-2024, 12:13
PMEmail Poster
Top
relax4o
Публикувано на: 25-02-2024, 16:11
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2801
Регистриран на: 04.04.07



Слагайте по един jsfiddle другия път за по-лесно.

Като кликнеш на бутона, бутона ти става фокусиран. От там ти се задейства button:focus блока.


--------------------
Бисери :D

QUOTE (oveRLuckEd)
Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.


QUOTE (nbacool2)
Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy
PM
Top
GoyaGag
Публикувано на: 25-02-2024, 17:39
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 5
Регистриран на: 23.02.24



Не зная, какво е jsfiddle.

Понеже бутона е все още фокусиран, новият стил е все още валиден?
Да, логично, но не се сетих.

Потърсих малко и виждам, че JS методът blur() премахва фокуса от елемент?

Има ли начин това да се направи само със CSS или не?

Съжалявам, че може да се струват на някого малко елементарни въпросите ми, но уча от два дена само и дори не зная, какво не зная.
PMEmail Poster
Top
relax4o
Публикувано на: 25-02-2024, 21:06
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2801
Регистриран на: 04.04.07



Има гугъл. Потърси jsfiddle и ще разбереш какво е.

Фокус състоянието се деактивира, когато се кликне извън елемента (което се нарича blur).

Просто махни button:focus от тук.

CODE

button:hover,
button:focus {
  font-weight: 700;
  cursor: pointer;
}


--------------------
Бисери :D

QUOTE (oveRLuckEd)
Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.


QUOTE (nbacool2)
Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy
PM
Top
1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2019 | BG Development | All Rights Reserved
RSS 2.0