Question

我正在尝试制作草图悬停应用。当光标悬停在网格方块上时，方块将填充当前拾取的颜色，当您再次将鼠标悬停在其上时，颜色将被删除。

最初一切似乎都在起作用。我可以将鼠标悬停在正方形上以应用red color并重新悬停以将其删除，或按clear button清除所有内容。但是，当我将颜色改为例如green，我无法通过悬停移除颜色，clear button无效。为什么会这样？

http://codepen.io/cgonen/full/zNQMMY/＆lt; =链接到悬停应用。

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

Answer 1

@jorges回答修复了问题的一部分。你还需要添加：

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

在$(this).removeClass('color')后的悬停功能中

。

然后用以下代码替换第44行： $('.color').css({'background-color': c})

Answer 2

你忘了清除风格背景试试这个

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

为什么改变颜色后我的清晰按钮/悬停工作不起作用？

2 个答案: