Cześć, chce zrobić radio button jako image, z tym że jest pewien problem. W tym fiddlu wszystko śmiga, robie strone w technologii MVC (.NET CORE). Gdzie problem. On hover - elegancko działa, tylko jest problem że jak KLIKNE W OBRAZEK to zawsze, zawsze - PIERWSZY RADIO BUTTON (pierwsza pozycja) staje się aktywna. Jak klikne w to małe kółeczko (standardowy radio button) to normalnie zmienia zaznaczenia (zgodnie z css, już nie jest szare tylko podświetlone i wybrane). Ktoś wytłumaczy mi, dlaczego klknięcia w obrazek nie działają jak należy? (zawsze zmienia na pierwszy radio button). Mój kod wygląda mniej więcej tak:
- ss
(2 radio button jest zhoverowany ale apka SS nie uwzględnia kursora).
Jak klikne w dowolny obrazek a nie bezpośrednio radio button checbox to zmieni na pierwszą opcje:
<div class="cc-selector-2">
@foreach (var item in Model.Races)
{
<input asp-for="Input.Race" type="radio" value="@item.Name" />
<label class="drinkcard-cc" asp-for="Input.Race" style="background-image:url(@item.ImgPath)"></label>
//Jeszcze tak próbwałem <label class="drinkcard-cc" asp-for="Input.Race"><img src="@item.ImgPath" width="100" height="100" /></label>
}
</div>
</div>
css:
<style>
.cc-selector-2 input {
position: absolute;
z-index: 999;
}
.cc-selector-2 input:active + .drinkcard-cc, .cc-selector input:active + .drinkcard-cc {
opacity: .9;
}
.cc-selector-2 input:checked + .drinkcard-cc, .cc-selector input:checked + .drinkcard-cc {
-webkit-filter: none;
-moz-filter: none;
filter: none;
}
.drinkcard-cc {
cursor: pointer;
background-size: contain;
background-repeat: no-repeat;
display: inline-block;
width: 100px;
height: 70px;
-webkit-transition: all 100ms ease-in;
-moz-transition: all 100ms ease-in;
transition: all 100ms ease-in;
-webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
-moz-filter: brightness(1.8) grayscale(1) opacity(.7);
filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover {
-webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
-moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
filter: brightness(1.2) grayscale(.5) opacity(.9);
}
</style>
Nie ma tu nic nowego, wszystko jest z tego fiddla:
http://jsfiddle.net/La8wQ/313/
Zastosowałem Simple method. Czemu? Bo z image only ten problem występuje też wyżej opisany. Z tym, że są to tylko obrazki to zawsze wybiera pierwszego radio boxa mimo kliknięcia w inny.
- screenshot-20210904124955.png (46 KB) - ściągnięć: 10
- screenshot-20210904125029.png (48 KB) - ściągnięć: 13
- screenshot-20210904125157.png (43 KB) - ściągnięć: 12
