Question

我试图填充一个元素，一旦它被点击到jquery中的一块颜色，但我无法解决它:(

我在div元素和控制台上有一个事件监听器，它说它已被点击，或悬停在哪个很棒，但是我需要帮助在点击元素后阻止颜色。

我现在有这个

$( document ).ready(function() {
  $( "div" ).on({
     "click": function() { console.log( "clicked!" ); },
     "mouseover": function() { console.log( "hovered!" );
  });
});

任何帮助都会很棒!!!

Answer 1

我相信你可以使用;

$( "div" ).on({
     "click": function() { 
           $(this).addClass( "clickClass" )  
      },
     "mouseover": function() {
         $(this).addClass( "hoverClass" )  
      }
});

然后在css中，添加您希望元素查找每个事件的方式

.clickClass{
   //your css here ex. background: purple;
 }

.hoverClass{
   //your css here ex. background: green;
 }

请务必同时添加mouseout个事件，因此当您的鼠标从div移除时，您会移除hoverClass

Answer 2

您可以使用jquery css函数来实现此目的。它也可以接受十六进制值 Reference

＆＃13;

$( document ).ready(function() {


$( "div" ).on({
"click": function() { 
$(this).css('background-color','red');

console.log( "clicked!" ); },
"mouseover": function() {
$(this).css('background-color','blue');
console.log( "hovered!" );
  }
});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
content
</div>

＆＃13;

脚本文件

中的

另一种解决方案

$( "div" ).on({
     "click": function() { 
           $(this).addClass( "redBg" )  
      },
     "mouseover": function() {
         $(this).addClass( "blueBg" )  
      }
});

您需要添加以下css样式（您也可以使用hex或rgb值）

.redBg{
  background-color:red;
 }

.blueBg{
   background-color:blue;
 }

<强>更新
如果您想要逐个选择元素而不是标记名称，您可以执行以下操作：

＆＃13;

$( document ).ready(function() {


$( ".changeClr" ).on({
"click": function() { 
$(this).css('background-color','red');

console.log( "clicked!" ); },
"mouseover": function() {
$(this).css('background-color','blue');
console.log( "hovered!" );
  }
});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="changeClr">
content
</div>
<div class="changeClr">
content2
</div>

＆＃13;

在处理完事件后将颜色放入元素中

2 个答案: