发表新帖
发表新帖

Change background color on mouseover and remove it after mouseout

前端 未结
关注
7 1103
被撕碎了的回忆
被撕碎了的回忆 2020-12-05 10:38

I have table which class is forum. My jquery code:
相关标签:
7条回答
  • 暖寄归人
    2020-12-05 10:42

    Try this , its working and simple

    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;
}​

    live demo

    http://jsfiddle.net/caBzg/

    0 讨论(0)
  • 花落未央
    2020-12-05 10:44

    This should be set directly in the CSS.

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

    If you are worried about the fact the IE6 will not accept hover over elements which are not links, you can use the hover event of jQuery for compatibility.

    0 讨论(0)
  • 温柔的废话
    2020-12-05 10:47

    If you don't care about IE ≤6, you could use pure 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>

    With jQuery, usually it is better to create a specific class for this style:

    .forum_hover { background-color: #380606; }

    and then apply the class on mouseover, and remove it on mouseout.

    $('.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>

    If you must not modify the class, you could save the original background color in .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>

    or

      $('.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>

    0 讨论(0)
  • 轮回少年
    2020-12-05 10:48

    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');
  }
);
    0 讨论(0)
  • 逝去的感伤
    2020-12-05 10:55

    After lot of struggle finally got it working. ( Perfectly tested)

    The below example will also support the fact that color of already clicked button should not be changes

    JQuery Code

    var flag = 0; // Flag is to check if you are hovering on already clicked item

$("a").click(function() {
    $('a').removeClass("YourColorClass");
    $(this).addClass("YourColorClass");
    flag=1;
}); 

$("a").mouseover(function() {
    if ($(this).hasClass("YourColorClass")) {
        flag=1;
    }
    else{
        $(this).addClass("YourColorClass");
    };
});

$("a").mouseout(function() {
    if (flag == 0) {
        $(this).removeClass("YourColorClass");
    }
    else{
        flag = 0;
    }
});
    0 讨论(0)
  • 春和景丽
    2020-12-05 10:57

    Set the original background-color in you CSS file:

    .forum{
    background-color:#f0f;
}​

    You don't have to capture the original color in jQuery. Remember that jQuery will alter the style INLINE, so by setting the background-color to null you will get the same result.

    $(function() {
    $(".forum").hover(
    function() {
        $(this).css('background-color', '#ff0')
    }, function() {
        $(this).css('background-color', '')
    });
});​
    0 讨论(0)
 看不清?
提交回复
热议问题