BG Development Форуми -> transition върху hover не връща обратно стила

BG Development · За реклама · За контакти

Помощ

Търсене

Потребители

Календар

Правила

Здравей! ( Включване | Регистриране )

BG Development Форуми -> Програмиране -> HTML/CSS/JavaScript/VBScript

transition върху hover не връща обратно стила, След click, transiton не връща стила

Абонирай се за темата | Изпрати адреса на темата на приятел | Принтирай темата

GoyaGag

Публикувано на: 25-02-2024, 12:12

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

Мнения: 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

relax4o

Публикувано на: 25-02-2024, 16:11

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

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

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

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

--------------------

Бисери :D

QUOTE (oveRLuckEd)

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

QUOTE (nbacool2)

Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy

GoyaGag	Публикувано на: 25-02-2024, 17:39
Име: Група: Потребител Ранг: Новопостъпил Мнения: 5 Регистриран на: 23.02.24	Не зная, какво е jsfiddle. Понеже бутона е все още фокусиран, новият стил е все още валиден? Да, логично, но не се сетих. Потърсих малко и виждам, че JS методът blur() премахва фокуса от елемент? Има ли начин това да се направи само със CSS или не? Съжалявам, че може да се струват на някого малко елементарни въпросите ми, но уча от два дена само и дори не зная, какво не зная.

relax4o

Публикувано на: 25-02-2024, 21:06

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

Мнения: 2826
Регистриран на: 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

1 потребители преглеждат тази тема в момента (1 гости, 0 анонимни потребители)

Потребители, преглеждащи темата в момента:

« Предишна тема | HTML/CSS/JavaScript/VBScript | Следваща тема »

BG Development Форуми -> Програмиране -> HTML/CSS/JavaScript/VBScript