изменить цвет фона и навести курсор на обновление

Question

изменить цвет фона и навести курсор на обновление

0

Я хочу изменить цвет логотипа веб-сайта и цвет наведения кнопок каждый раз, когда пользователь обновляет страницы. Цвета должны быть согласованы. Ссылка на сайт Логотип на самом деле представляет собой изображение с прозрачной областью, где я могу поместить любой цвет фона, который я хочу.

У кого-то была аналогичная проблема: JQuery Случайный цвет и цвет фона, на 2 div's

Это javascript, который я создал на основе этого потока:

$(document).ready(function(){
   var colors = ["#fda65f","#66CCFF","#71e271","#D37AFF"];                
   var rand = Math.floor(Math.random()*colors.length);           
   $('#logo').css("background-color", colors[rand]);
   $('.cbp-ig-grid').css("background-color", colors[rand]);
});

.cbp-ig-grid правильно изменяет цвет фона, но я хочу, чтобы цвет отображался только при наведении. Класс.cbp-ig-grid имеет свойство hover:

.cbp-ig-grid li> a: hover {background-color: # 71e271;}

Проблема в том, что если я изменю код javascript '.cbp-ig-grid' с '.cbp-ig-grid li> a: hover', он перестанет работать. У меня нет опыта работы с Javascript, поэтому я определенно делаю что-то неправильно.

Andrei M 31 март 2014, в 17:35

Источник

Теги:

javascript

jquery

css

random

4 ответа

1

Попробуйте использовать метод hover():

$('.cbp-ig-grid').hover(function() {
   $(this).css("background-color", colors[rand]); 
});

csanonymus 31 март 2014, в 13:01

0

Спасибо! он работает с $ ('. cbp-ig-grid li'). hover (function () {$ (this) .css ("background-color", colors [rand]);}); но теперь после зависания цвет остается активным. Что я могу сделать, чтобы эффект парения оставался только при наведении мыши? });
Andrei M 31 март 2014, в 15:56

0

Использовать это

$('.cbp-ig-grid  li > a').hover(function(){
$(this).css("background-color", colors[rand]);
});

Rupam 31 март 2014, в 13:19

0

Что вы делаете, так это:

замените $('.cbp-ig-grid').css("background-color", colors[rand]);

с $('.cbp-ig-grid li > a:hover').css("background-color", colors[rand]);

это верно? в любом случае вы не можете управлять состоянием зависания с помощью селектора jQuery: $('.cbp-ig-grid')

вы можете добиться этого, установив обработчик событий с помощью такой функции:

$(document).ready(function(){
   var colors = ["#fda65f","#66CCFF","#71e271","#D37AFF"];                
   var rand = Math.floor(Math.random()*colors.length);           
   $('#logo').css("background-color", colors[rand]);

   $(".cbp-ig-grid li").on("mouseover", function () {
       $(this).css("background-color", colors[rand]);
   });

}

Gotschi 31 март 2014, в 12:46

Ещё вопросы

Спасибо! он работает с $ ('. cbp-ig-grid li'). hover (function () {$ (this) .css ("background-color", colors [rand]);}); но теперь после зависания цвет остается активным. Что я могу сделать, чтобы эффект парения оставался только при наведении мыши? });

haxxxton · Accepted Answer · 2014-03-31T12-53-00.000Z

я был бы более склонным распечатывать лист <style> используя javascript, чем добавлять события hover() используя jquery

<script>
var colors = ["#fda65f","#66CCFF","#71e271","#D37AFF"];                
var rand = Math.floor(Math.random()*colors.length);
var head = document.head,
    style = document.createElement('style');

var css = '#logo { background-color: ' + colors[rand] + '; } ';
    css += '.cbp-ig-grid li > a:hover { background-color: ' + colors[rand] + '; } ';

style.type = 'text/css';
if (style.styleSheet){
  style.styleSheet.cssText = css;
} else {
  style.appendChild(document.createTextNode(css));
}

head.appendChild(style);
</script>

Вы только что спасли меня! : D Работает отлично!