为什么我的清除按钮/悬停在改变颜色后工作？

我正试图做一个草图悬停的应用程序。当光标悬停在网格正方形上时，正方形会填满当前拾取的颜色，当您将鼠标悬停在正方形上时，颜色会被移除。为什么我的清除按钮/悬停在改变颜色后工作？

最初的一切似乎工作。我可以将鼠标悬停在正方形上应用red color，然后重新悬停以将其移除或按clear button清除所有内容。但是当我改变颜色为例如，我无法通过悬停移除颜色，而clear button也不起作用。这是为什么发生？

http://codepen.io/cgonen/full/zNQMMY/ < =指向悬停应用的链接。

$(function() { 
 
    
 
    grid() 
 
    clear() 
 
    createGrid() 
 
    hover() 
 
    colorpick() 
 
}) 
 

 

 
function createGrid(size) { 
 
     $('.grid').empty() 
 
     size = 16; 
 
     width = 600/size; 
 
     for (var j = 0; j < size; j++) { 
 
      for (var i = 0; i < size; i++) { 
 
       $('.grid').append('<div class="vlak"></div>') 
 
      } 
 
     } 
 
      $('.vlak').css("width", width) 
 
      $('.vlak').css("height", width) 
 
     
 
    } // end 
 

 

 
function grid() { 
 
    $('input').on('change', function() { 
 
     size = $('input').val(); 
 

 
     createGrid(size) 
 
    }) 
 
} 
 

 
function hover(c) { 
 
    $('.vlak').on('mouseenter', function(){ 
 

 
     
 
     console.log(c) 
 
     if($(this).hasClass('color')) { 
 
      $(this).removeClass('color') 
 
     } else { 
 
      $(this).addClass('color'); 
 
      $('.color').css('background-color', c) 
 
     } 
 

 
    }) 
 
} 
 

 
function colorpick() { 
 
    $('select').on('change', function(){ 
 
     var c = $(this).val() 
 
     $('.vlak').off() 
 
     hover(c) 
 
    }) 
 
} 
 

 
function clear() { 
 
    $('button').on('click', function(){ 
 
    $('.vlak').removeClass('color') 
 
    }) 
 
}

html { 
 
    box-sizing: border-box; } 
 

 
*, *:before, *:after { 
 
    box-sizing: inherit; } 
 

 
.clearfix:before, 
 
.clearfix:after { 
 
    content: ""; 
 
    display: block; 
 
    clear: both; } 
 

 
.wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; } 
 

 
.grid { 
 
    box-sizing: content-box; 
 
    line-height: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    outline: 1px solid black; } 
 

 
.vlak { 
 
    box-sizing: border-box; 
 
    float: left; 
 
    width: 50px; 
 
    height: 50px; 
 
    line-height: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 1px solid black; } 
 

 
.color { 
 
    background-color: red; } 
 

 
.black { 
 
    background-color: black; } 
 

 
.red { 
 
    background-color: red; } 
 

 
.blue { 
 
    background-color: blue; } 
 

 
.pink { 
 
    background-color: pink; } 
 

 
.green { 
 
    background-color: green; } 
 

 
.yellow { 
 
    background-color: yellow; }

<html lang="en"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <meta name="viewport" content = "width=device-width", initiat-scale="1.0"> 
 
    <title>Document</title> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 
 
    <link rel="stylesheet" href="styles/styles.css"> 
 
</head> 
 
    
 
<body> 
 
    
 
    <div class="wrapper"> 
 

 
     <div class="header"> 
 
      <h1>HoverMatic</h1> 
 
      <p>General description placeholder</p> 
 
      <input type="number" value="16" placeholder="grid size"> 
 
      <select name="colors" id=""> 
 
       <option value="black">black</option> 
 
       <option value="blue">blue</option> 
 
       <option value="green">green</option> 
 
       <option value="pink">pink</option> 
 
       <option value="red">red</option> 
 
       <option value="yellow">yellow</option> 
 
      </select> 
 
      <button>clear grid</button> 
 
     </div> 
 
     <div class="grid clearfix"></div> 
 
    </div> 
 
    
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<script src="scripts/main.js"></script> 
 
</body>

来源

2017-02-18 Hyrule

请出示相关代码的问题 –

要是一个codepen但现在藏汉添加的代码段。 – Hyrule

您忘记清除风格backgound试试这个

function clear() { 
     $('button').on('click', function(){ 
      $('.vlak').removeClass('color') 
      $('.vlak').css({'background-color':'inherit'}) 
     }) 
    }

来源

2017-02-18 16:00:12

嗯..你是什么意思与清晰的风格背景？这适用于清晰的按钮部分，但我不明白为什么$（'。vlak'）。css（{'background-color'：'inherit'}会这样做。 – Hyrule

你编辑你的问题，你的第一个问题是当你改变颜色并按下清除按钮时如何去除颜色 –

是的，我很抱歉，选择了一个不好的标题编辑以更好地适合我的问题'为什么'部分对学习很重要 – Hyrule

@jorges回答修复该问题的一个组成部分。您还需要添加：

$(this).css({'background-color': 'inherit'})

在悬停功能

$(this).removeClass('color')之后。

，然后替换行44： $('.color').css({'background-color': c})

来源

2017-02-18 16:12:46

为什么我的清除按钮/悬停在改变颜色后工作？

回答

相关问题