Класс меняется, но фон не будет, почему он не изменится?

Я уверен, что это просто, и я пропускаю что-то очевидное, но я пытаюсь создать его так, чтобы фон переключался между цветом и цветом по умолчанию. Я могу получить фон, чтобы изменить это, если я:Класс меняется, но фон не будет, почему он не изменится?

.css("background-color", "yellow")

Но попытка переключить класс по каким-то причинам не работает. Он меняет класс на .black, но это все, без изменения цвета фона.

//This is my JQuery statement 
Home.HighlightBackground = function() 
{ 
    $(".black").click(function() 
    { 
     $(this).toggleClass("highlighted") 
    }) 

} 


//This is the JQuery that creates the board 

var cells = $(".cell"); 
var colorCount = 0; 

for (var i = 0; i < cells.length; i++) 
{ 
    var cell = $(cells[i]); 
    var isDark = colorCount % 2 == 0; 
    var isNextRow = (i + 1) % 8 == 0; 
    colorCount += isNextRow ? 2 : 1; 
    cell.css("background-color", isDark ? "navy" : "white"); 
} 


//This is the related CSS 

.home > .board 
{ 
    display: table; 
    border: 1px solid black; 
} 

.home > .board > .row 
{ 
    display: table; 
} 

.home > .board > .row > .cell 
{ 
    width: 80px; 
    height: 80px; 
    border: 1px solid black; 
    display: inline-block; 
} 

.piece 
{ 
    background-size: 75px 75px; 
    background-repeat: no-repeat; 
    background-position: center; 
    background-origin: content-box; 
} 

.red 
{ 
    background-image: URL('../images/red.png'); 
} 


.black 
{ 
    background-image: URL('../images/black.png'); 
} 

.highlighted 
{ 
    background-color: yellow; 
} 


//html source 



<html> 

<head> 
    <title>@Model.PageTitle</title> 
    <link href="~/Styles/Home.css" rel="stylesheet" /> 
</head> 

<body> 

     <script   src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
     <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery- ui.min.js"></script> 
     <script src="~/Scripts/Home.js"></script> 

     <div class="home"> 

      <div class="board"> 
       <div class="row"> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
       </div> 
       <div class="row"> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
        <div class="cell piece red"></div> 
       </div> 
       <div class="row"> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
       </div> 
       <div class="row"> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
       </div> 
       <div class="row"> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
       </div> 
       <div class="row"> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
        <div class="cell"></div> 
       </div> 
       <div class="row"> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
       </div> 
       <div class="row"> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
        <div class="cell piece black"></div> 
       </div> 
      </div> 

     </div> 

</body>

источник

2015-09-29 Kyle

Опубликовать некоторые 'html' тоже для этого для предварительного просмотра !! –

Вы проверили сгенерированный источник html с Firebug? – reporter

Я не сомневаюсь, что у вас есть причины, но просто подумайте о переключении всего на «фоновый цвет». Я думаю, «black.png» - черный пиксель? Если это так, измените цвет, чтобы избежать перегрузки и повышения производительности. –

Вы смешиваете background-image и background-color. Если это опция, установите оба значения: background, чтобы получить желтый цвет фона. В противном случае изображение всегда будет отображаться над цветом.

Другой подхода может быть переопределение background-image свойства в выделенном-классе:

.highlighted 
{ 
    background-color: yellow; 
    background-image: none; 
}

источник

2015-09-29 14:03:20

Добавлен источник html внизу – Kyle

Используйте background свойства вместо ваших индивидуальных свойств фона. background отменяет любые ранее объявленные background-color и background-image среди других background-* деклараций элементу.

CSS

.black { 
    background: URL('../images/black.png'); 
} 

.highlighted { 
    background: yellow; 
}

JSFIDDLE

источник

2015-09-29 14:07:20 Rafa

Это потому, что вы смешиваете background-color с background-image. Атрибут изображения имеет приоритет, поэтому изображение будет перекрывать цвет. Если это проблема, вы можете сделать что-то изменить это:

1 - Изменение CSS Hightlight к:

.highlighted 
     { 
      background-image:none; 
      background-color: yellow; 
     }

2 - ИЛИ Создать новый класс CSS, чтобы смесь .highlighted и .black, например, :

.black.highlighted 
     { 
      background-image:none; 
     }

источник

2015-09-29 14:39:51

Класс меняется, но фон не будет, почему он не изменится?

ответ

Смежные вопросы