У меня есть вопрос. Например, у вас есть 3 пролета (по умолчанию это черный цвет), на span: hover цвет меняется на красный, это нормально. Но что если я скажу вам, что в начале, первый промежуток имеет оранжевый цвет? . Теперь я хочу навести оранжевый, и он должен стать красным, а когда я не наведен, он должен стать черным, по умолчанию. И, конечно, при втором наведении курсора он будет похож на другие пролеты (красный на наведении и черный на наведении) . Извините, если я не объяснил, мой английский успех * s. Вот что я сделал http: // jsfiddle. net / 5oftL12k / 5 / кек. И возможно ли это реализовать только с помощью css?

<span class="class1">blabla</span>
<span class="class2">blabla</span>
<span class="class3">blabla</span>

.class1{color:orange}
span:hover{color:red}
-1
art 9 Янв 2017 в 22:03

3 ответа

Лучший ответ

Вы можете сделать это с помощью jQuery:

$(".class1").mouseleave(function(){
  $(this).removeClass("class1");
})

Второй :

$(":not('.class1')").mouseover(function(){
  $('.class1').removeClass("class1");
})

http://jsfiddle.net/jmp8rzys/11/

1
Banzay 9 Янв 2017 в 19:40

Html

<span class="class1" id="firstspan">blabla</span>
<span class="class2">blabla</span>
<span class="class3">blabla</span>

Css

.class1{
 color: orange;
}

span:hover{
 color: red;
}

Javascript

var firstSpan = document.getElementById("firstspan");

firstSpan.onmouseover = function() {
 firstSpan.style.color = "red";
};

firstSpan.onmouseout = function() {
 firstSpan.style.color = "black";
};

JSFiddle: http://jsfiddle.net/Dani1999/5oftL12k/9/

0
brice349 9 Янв 2017 в 19:28
var spans = document.getElementsByClassName('rainbow-hover');
for (var i = spans.length; i--;) {
  let c = ['green', 'red', 'blue', 'orange'];
  spans[i].onmouseover = function() {
    if (!c.length) c = ['green', 'red', 'blue', 'orange'];
    this.style.color = c.shift();
  }
}
<span class=rainbow-hover>Hover me</span>
<span class=rainbow-hover>Hover me</span>
<span class=rainbow-hover>Hover me</span>
<span class=rainbow-hover>Hover me</span>
<span class=rainbow-hover>Hover me</span><span class=rainbow-hover>Hover me</span>
<span class=rainbow-hover>Hover me</span>
0
I wrestled a bear once. 9 Янв 2017 в 19:15