CSS Hover изменить цвет фона на других ярлыках

Это очень сложный вопрос, и я объясню это лучше всего, если у меня есть полный рабочий код.CSS Hover изменить цвет фона на других ярлыках

У меня есть некоторый код рейтинга и то, что мне нужно это сделать, это следующее:

например: Нажмите на 5-й скорости (последний) ... Это изменит его цвет и все те, перед этим зеленый.

Теперь наступает сложная часть.

Если вы теперь наведываетесь на любой из них до 5-го (выбранного), мне нужен выбранный (в данном случае 5-й) и любой между тем, где вы находитесь, как другой цвет фона.

Итак, если выбранный был 5-м, а я навешивался на 2-й, то 5-й, 4-й и 3-й должны иметь другой цвет фона.

Надеюсь, я объяснил это правильно.

Вот jsfiddle его:

https://jsfiddle.net/Satch3000/chd6yfzw/1/

и ниже код:

HTML:

<div class="rating-system1"> 
    <input type="radio" name='rate' id="star5" /> 
    <label for="star5"></label> 

    <input type="radio" name='rate' id="star4" /> 
    <label for="star4"></label> 

    <input type="radio" name='rate' id="star3" /> 
    <label for="star3"></label> 

    <input type="radio" name='rate' id="star2" /> 
    <label for="star2"></label> 

    <input type="radio" name='rate' id="star1" /> 
    <label for="star1"></label> 
</div>

CSS:

.rating-system1 { 
    display: inline-block; 
    position: relative; 
} 

input { 
    display: none; 
} 

label { 
    float: right; 
    display: inline-block; 
    background: #ccc; 
    position: relative; 
} 

.rating-system1 label:before { 
    content: ''; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: inherit; 
    top:0; 
    left:0; 
} 

.rating-system1 input:checked ~ label, 
.rating-system1 label:hover ~ label, 
.rating-system1 label:hover { 
    background: seagreen; 
} 

.rating-system1 input:checked ~ label:before { 
    transform: rotate(90deg); 
}

источник

2016-01-21 Satch3000

Ваш подход к проблеме с CSS очень удивителен. Лично мне легче делать такие вещи, используя события. Вы можете попробовать использовать mouseenter/mouseleave или mouseover/mouseout или их комбинацию для достижения того же самого. Есть ли какая-нибудь причина для строгого использования CSS? – malinkody

В чем должен быть установлен «background-color» наведенной «метки»? – guest271314

Попробуй что-нибудь (полосатый много вашего CSS, чтобы сделать его проще, но вы получите идею) https://jsfiddle.net/zrksc8ac/ –

D efine в background для :checked элементов, когда родитель колебались:

.rating-system1:hover input:checked ~ label{ 
    background:#666; 
}

И затем переопределить этот стиль, чтобы показать, по умолчанию парил background снова:

.rating-system1 input:checked ~ label, 
.rating-system1 label:hover ~ label, 
.rating-system1 label:hover, 
.rating-system1 input:checked ~ label:hover ~ label, /* added */ 
.rating-system1 input:checked ~ label:hover,   /* added */ 
.rating-system1 label:hover ~ input:checked ~ label{ /* added */ 
    background:seagreen; 
}

Вот Fiddle.

источник

2016-01-21 22:31:15

Я раньше такого подхода не видел. Кажется блестящим. Можете ли вы сказать мне, почему время отклика для эффектов наведения довольно медленное по сравнению с событиями наведения javascript? – malinkody

Thanx, у меня было 15 минут. ;-) Без примера я не могу сказать, но, возможно, потому, что выбор js может быть довольно простым. –

я возился с этим в оригинальной скрипке и придумал эти селекторы:

.rating-system1 input:checked ~ label { 
    background:#ccc; 
} 

.rating-system1:not(:hover) input:checked ~ label, 
.rating-system1 input:checked ~ label:hover, 
.rating-system1 input:checked ~ label:hover ~ label { 
    background:seagreen; 
}

не совпадает с решением предложенного Линусом, но он делает ту же работу:

body{background:#222;} 
 

 
.showcase{ 
 
    text-align:center; 
 
    position: absolute; 
 
    top:50%; 
 
    left:50%; 
 
    transform:translateY(-50%) translateX(-50%); 
 
} 
 

 
.rating-system1 { 
 
    width:100%; 
 
    height:10px; 
 
    display:inline-block; 
 
    margin:2px; 
 
    position: relative; 
 
} 
 

 
input{ 
 
    display:none; 
 
} 
 

 
label{ 
 
    float:right; 
 
    display:inline-block; 
 
    width:30px; 
 
    height:10px; 
 
    background:#ccc; 
 
    margin:4px; 
 
    position: relative; 
 
    transition:all .3s; 
 
} 
 

 
.rating-system1 label:before{ 
 
    content: ''; 
 
    position: absolute; 
 
    width:100%; 
 
    height:100%; 
 
    background: inherit; 
 
    top:0; 
 
    left:0; 
 
    transition:all 0.3s; 
 
} 
 

 
.rating-system1 input:checked ~ label, 
 
.rating-system1 label:hover ~ label, 
 
.rating-system1 label:hover{ 
 
    background:seagreen; 
 
} 
 

 
.rating-system1 input:checked ~ label { 
 
    background:#ccc; 
 
} 
 

 
.rating-system1:not(:hover) input:checked ~ label, 
 
.rating-system1 input:checked ~ label:hover, 
 
.rating-system1 input:checked ~ label:hover ~ label { 
 
    background:seagreen; 
 
} 
 

 
.rating-system1 input:checked ~ label:before{ 
 
    transform:rotate(90deg); 
 
} 
 

 
.text{ 
 
    color:#ccc; 
 
    padding:10px 0; 
 
    position: absolute; 
 
    width:100%; 
 
    top:100%; 
 
}

<div class="showcase"> 
 
<div class="rating-system1"> 
 

 
<input type="radio" name='rate' id="star5" /> 
 
<label for="star5"></label> 
 

 
<input type="radio" name='rate' id="star4" /> 
 
<label for="star4"></label> 
 

 
<input type="radio" name='rate' id="star3" /> 
 
<label for="star3"></label> 
 

 
<input type="radio" name='rate' id="star2" /> 
 
<label for="star2"></label> 
 

 
<input type="radio" name='rate' id="star1" /> 
 
<label for="star1"></label> 
 

 
</div> 
 

 
</div>

источник

2016-01-21 23:38:01 Rounin

CSS Hover изменить цвет фона на других ярлыках

ответ

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