Вопросы Теги

Изменить цвет фона при наведении указателя мыши и удалить его после наведения указателя мыши

У меня была та же проблема, я удалил следующий скрипт, и он работал для меня. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
28
задан good_evening 18 September 2010 в 09:50
поделиться

4 ответа

Если вас не волнует IE ≤6, вы можете использовать чистый CSS ... 

.forum:hover { background-color: #380606; }


.forum { color: white; }
.forum:hover { background-color: #380606 !important; }
/* we use !important here to override specificity. see http://stackoverflow.com/q/5805040/ */

#blue { background-color: blue; }
<meta charset=utf-8>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

В jQuery обычно лучше создать определенный класс для этого стиля: 

.forum_hover { background-color: #380606; }

, а затем примените класс при наведении мыши и удалите его при наведении мыши. 

$('.forum').hover(function(){$(this).toggleClass('forum_hover');});


$(document).ready(function(){
  $('.forum').hover(function(){$(this).toggleClass('forum_hover');});
});
.forum_hover { background-color: #380606 !important; }

.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

Если вы не хотите изменять класс, вы можете сохранить исходный фон цвет в .data(): 

  $('.forum').data('bgcolor', '#380606').hover(function(){
    var $this = $(this);
    var newBgc = $this.data('bgcolor');
    $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
  });


$(document).ready(function(){
  $('.forum').data('bgcolor', '#380606').hover(function(){
    var $this = $(this);
    var newBgc = $this.data('bgcolor');
    $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
  });
});
.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

или 

  $('.forum').hover(
    function(){
      var $this = $(this);
      $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
    },
    function(){
      var $this = $(this);
      $this.css('background-color', $this.data('bgcolor'));
    }
  );   


$(document).ready(function(){
  $('.forum').hover(
    function(){
      var $this = $(this);
      $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
    },
    function(){
      var $this = $(this);
      $this.css('background-color', $this.data('bgcolor'));
    }
  );    
});
.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>
53
ответ дан 28 November 2019 в 02:31
поделиться

Попробуйте, его рабочий и простой

HTML 

​​​​​​​​​​​​​​​​​​​​​<html>
<head></head>
<body>
    <div class="forum">
        test
    </div>
</body>
</html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Javascript 

$(document).ready(function() {
    var colorOrig=$(".forum").css('background-color');
    $(".forum").hover(
    function() {
        //mouse over
        $(this).css('background', '#ff0')
    }, function() {
        //mouse out
        $(this).css('background', colorOrig)
    });
});​

css 

.forum{
    background:#f0f;
}​

Живая демо

http://jsfiddle.net/caBzg/

8
ответ дан 28 November 2019 в 02:31
поделиться

HTML: 

<div id="id">
</div>
<div id="hiddenDiv" style="display:none;"></div>

jQuery: 

$('#id').hover(function(){
    $("#hiddenDiv").css('display','block');
  },
  function(){
    $("#hiddenDiv").css('display','none');
  }
);
1
ответ дан 28 November 2019 в 02:31
поделиться

Это мое решение: 

$(document).ready(function () {
  $( "td" ).on({
    "click": clicked,
    "mouseover": hovered,
    "mouseout": mouseout
});

var flag=0;

function hovered(){
  $(this).css("background", "#380606");
}

function mouseout(){
  if (flag == 0){
  $(this).css("background", "#ffffff");
} else {
  flag=0;
}
}

function clicked(){
  $(this).css("background","#000000");
  flag=1;
}
})
0
ответ дан 28 November 2019 в 02:31
поделиться
Другие вопросы по тегам:

Похожие вопросы: