Пользовательский css radobuttons hover effect

-1

Я пытаюсь создать что-то вроде this , но я не так хорош с javascript и так .. Итак, я получил это сейчас, но я не могу заставить эффект зависания работать. .Пользовательский css radobuttons hover effect

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>The HTML5 Herald</title> 
    <link rel="stylesheet" href="styles.css"> 
</head> 

<input type="radio" id="radio1" name="radios" value="all" checked> 
    <label for="radio1">iPhone</label> 
<input type="radio" id="radio2" name="radios" value="false"> 
    <label for="radio2">Galaxy S IV</label> 
<input type="radio" id="radio3" name="radios" value="true"> 
    <label for="radio3">Nexus S</label> 

<body> 
</body> 
</html>

И CSS

input[type=radio] { 
    display:none; 
    margin:10px; 
} 

input[type=radio] + label { 
    display:inline-block; 
    margin: 2px; 
    padding: 18px 112px; 
    background-color: white; 
    border: 1px solid #d6d6d6; 
    border-radius: 4px; 
} 

input[type=radio]:checked + label { 
    background-image: none; 
    border: 2px solid #08c; 
}

Ну это работает, но как я сделать эффект парения? Любая помощь была бы полезной! Также, если вы думаете, что я должен делать это совершенно иначе, скажите, пожалуйста,

источник

2015-10-15 Martijn Linders

Просто сделайте это с помощью простого CSS.

input[type=radio] { 
 
    display: none; 
 
    margin: 10px; 
 
} 
 
input[type=radio] + label { 
 
    display: inline-block; 
 
    margin: 2px; 
 
    padding: 18px 112px; 
 
    background-color: white; 
 
    border: 1px solid #d6d6d6; 
 
    border-radius: 4px; 
 
} 
 
input[type=radio] + label:hover { 
 
    border: 1px solid black; 
 
    background-color: gray; 
 
} 
 
input[type=radio]:checked + label { 
 
    background-image: none; 
 
    border: 2px solid #08c; 
 
}

<input type="radio" id="radio1" name="radios" value="all" checked> 
 
<label for="radio1">iPhone</label> 
 
<input type="radio" id="radio2" name="radios" value="false"> 
 
<label for="radio2">Galaxy S IV</label> 
 
<input type="radio" id="radio3" name="radios" value="true"> 
 
<label for="radio3">Nexus S</label>

Вы можете даже пойти больше фантазии и добавить некоторые переходы (большинство браузеров поддерживают их Nowdays http://caniuse.com/#feat=css-transitions)

input[type=radio] { 
 
    display: none; 
 
    margin: 10px; 
 
} 
 
input[type=radio] + label { 
 
    transition: all 0.5s ease; 
 
    display: inline-block; 
 
    margin: 2px; 
 
    padding: 18px 112px; 
 
    background-color: white; 
 
    border: 1px solid #d6d6d6; 
 
    border-radius: 4px; 
 
} 
 
input[type=radio] + label:hover { 
 
    border: 1px solid black; 
 
    background-color: LightGray; 
 
} 
 
input[type=radio]:checked + label { 
 
    background-image: none; 
 
    border: 2px solid #08c; 
 
}

<input type="radio" id="radio1" name="radios" value="all" checked> 
 
<label for="radio1">iPhone</label> 
 
<input type="radio" id="radio2" name="radios" value="false"> 
 
<label for="radio2">Galaxy S IV</label> 
 
<input type="radio" id="radio3" name="radios" value="true"> 
 
<label for="radio3">Nexus S</label>

источник

2015-10-15 12:44:12

Пользовательский css radobuttons hover effect

ответ

Смежные вопросы