تغيير لون الخلفية عند تمرير الماوس وإزالته بعد تمرير الماوس

Question

لدي الجدول الذي هو الفصل forum.كود jquery الخاص بي:

<script type="text/javascript">
    $(document).ready(function() {
        $('.forum').bind("mouseover", function(){
            var color  = $(this).css("background-color");

            $(this).css("background", "#380606");

            $(this).bind("mouseout", function(){
                $(this).css("background", color);
            })    
        })    
    })
</script>

إنه يعمل بشكل مثالي، ولكن هل من الممكن القيام بذلك بطريقة أكثر كفاءة بدونه var color = $(this).css("background-color");.بعد ذلك مباشرة mouseout اترك لون الخلفية السابق وقم بإزالته #380606؟شكرًا لك.

Answer 1

إذا كنت لا تهتم بـ 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; }

ثم قم بتطبيق الفصل على Mouseover ، وأزله على الماوس.

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

Answer 2

قم بتعيين لون الخلفية الأصلي في ملف CSS الخاص بك:

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

ليس عليك التقاط اللون الأصلي في jQuery.تذكر أن jQuery سيغير النمط INLINE، لذلك عن طريق ضبط لون الخلفية على قيمة خالية، ستحصل على نفس النتيجة.

$(function() {
    $(".forum").hover(
    function() {
        $(this).css('background-color', '#ff0')
    }, function() {
        $(this).css('background-color', '')
    });
});​

Answer 3

جرب هذا، إنه عملي وبسيط

لغة البرمجة

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

جافا سكريبت

$(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/

Answer 4

يجب ضبط هذا مباشرة في CSS.

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

إذا كنت قلقًا بشأن حقيقة أن IE6 لن يقبل التحوم على العناصر التي لا تكون روابط ، فيمكنك استخدام يحوم حدث jQuery للتوافق.

Answer 5

لغة البرمجة:

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

jQuery:

$('#id').hover(function(){
    $("#hiddenDiv").css('display','block');
  },
  function(){
    $("#hiddenDiv").css('display','none');
  }
);

Answer 6

بعد الكثير من النضال في النهاية جعلها تعمل. (تم اختباره تمامًا)

سوف يدعم المثال أدناه أيضًا حقيقة أن لون الزر الذي تم النقر عليه بالفعل يجب ألا يكون تغييرًا

رمز jQuery

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

Answer 7

هذا هو الحل:

$(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;
}
})