2012-01-26 2 views
0

Я Css так:Изменение CSS динамически

.myTabs .JustForFun .ajax__tab_inner:hover 
{ 
    width: 109px; 
    background: url ("/images/csc_tr.png") no-repeat 100% 0%; margin-right: 2px; 
    background-color: #BBC614; 
} 

Использование JavaScript, JQuery или asp.net код позади C# Я хотел бы манипулировать background-color атрибут.

Как я могу это сделать, каковы плюсы и минусы решения, которое вы мне рекомендовали, это то, что я хотел бы знать.

+0

Вы хотите установить динамически для каждого наведения или пытаетесь установить это значение при загрузке страницы? – kwelch

+0

Считаете ли вы использование css3? Это даст вам приятные переходы через изменение цвета, хотя оно не будет совместимо со старыми браузерами. – JackalopeZero

+0

@kwelch page load :) или dom object ready – Anicho

ответ

1

Вот что я сделал. Он устанавливает начальное значение в css. Затем у меня есть jquery, который меняет div на hover.

Первая функция в том, когда курсор входит, а второй - при выводе курсора.

Demo

+0

Я согласен, что вы ответили, что я писал по существу то же самое, что и ха-ха, спасибо друг! – Anicho

4

В JQuery вы можете просто использовать

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $(".myTabs").css("background-color","your color"); 
    }); 
</script> 

Если вы делаете это с помощью C# код, то страница будет обновляться.

Вы не можете применить изменения атрибутов к :hover через javascript, вместо этого вы должны использовать функцию jquery.hover.

+0

Так что я просто делаю '$ (". MyTabs .JustForFun .ajax__tab_inner: hover "). Css (" background-color "," your color ");' – Anicho

+0

Ваше решение не работает. – Anicho

2

Here it is using css3 (адаптировано из w3schools tutorial).

Я знаю его не JavaScript, как вы просили, но это намного проще, если вы ищете простые эффекты.

+0

спасибо за Jackalope, параметры перехода потрясающие! – Anicho

0

любые классы с :hover, :active и т.д., не может манипулировать с Javascript или JQuery достаточно легко. Рекомендуемая альтернатива заключается в том, чтобы сбросить функцию :hover css и вместо этого использовать функцию jquery.hover.

jquery.hover:

$(".classOrID").hover(

    function() { 
     $(this).css("YourAttribute", <%= primaryColor %>); 
    } , 

    function() { 
     $(this).css("YourAttribute", <%= secondaryColor %>); 

    } 
); 

Вы можете заметить, что <%= primaryColor %> это просто получает значение в C# из кода, за которой подхватывает его из палитры цветов в моем СХ.

Для чего-либо с изменением css не требуется: hover я бы сделал.

$('.classOrID').css('background-color', <%= primaryColor %>); 

Или что Шобан рекомендовал javascript-решение без jquery.

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