jQuery поменять CSS цвет для текста при наведении мышью (.text:hover)
Здравствуйте)
В стиле есть строка Код:
.new_title:hover {color: #0000FF;}
$('hover.new_title').css('color','#707070');
$('.new_title:hover').css('color','#707070');
Первый вариант не меняет. Второй - выдает ошибку (Объект не поддерживается) |
прошу прощения, но не смог удержаться от вопроса : А за чем использовать для этого jQuery?
|
А почему бы и нет? )
В принципе, я не против других вариантов... Если можна еще как-то на лету менять это свойство, не стесняйтесь, рассказывайте) |
Цитата:
Цитата:
хотя каждый удовлетворяется, как ему нравится ;-) читаем, думаем, решаем, что удобней |
Ну неужели вы думаете что я прикрутил jQuery только для того, чтобы поменять одно свойство? )
Теперь объясните пожалуйста, как с помощью
document.getElementById("id").style.property="value"
изменить цвет при наведении мышью. |
|
JooZ, зачем для этого jquery? Css твою проблему не решает?
|
Не решает.
Потому что пользователь сам выбирает цвета, размер шрифта и другие свойства для своего блока. И после смены какого-то одного свойства надо сразу-же изменить его в блоке, чтобы юзер видел, чего он натворил. |
вижу 3 варианта:
1) с помощью hover назначаешь 2 обработчика, которые изменяют/восстанавливают цвет элемента 2) прописываешь классы соответствующие цветам и в javascript просто изменяешь класс (если классов оказется не много) 3) используешь api для работы с таблицами стилей (не знаю насколько это кросс-браузерно), пример использования:
// Get the first stylesheet of the document
var ss = document.styleSheets[0];
// Get the rules array using W3C or IE API
var rules = ss.cssRules?ss.cssRules:ss.rules;
// Iterate through those rules
for(var i = 0; i < rules.length; i++) {
var rule = rules[i];
// Skip @import and other nonstyle rules
if (!rule.selectorText) continue;
// This is the text form of the rule
var ruleText = rule.selectorText + " { " + rule.style.cssText + " }";
// If the rule specifies a margin, assume it is in pixels and double it
var margin = parseInt(rule.style.margin);
if (margin) rule.style.margin = (margin*2) + "px";
}
|
Цитата:
$(document).ready(function(){
$(".price").find("tr").hover(function() {
$(this).toggleClass("color");
}, function() {
$(this).toggleClass("color");
});
});
Надеюсь комунить поможет :) |
Ох-ох! А нельзя просто добавить в документ объект style с нужным цссным правилом внутри?
Приоритетность у селекторов одинаковая, так что, тот набор правил, который в документе позже, перекроет тот, что раньше. |
я думаю, Dobrak решал несколько другую задачу, а именно, "как сделать ...:hover {} с помощью jQuery" ;)
|
На мой взгляд самое просто решение:
<style type="text/css">
a {color: red;}
.color {color: black;}
</style>
<a href="#" class="color">наведи</a>
<script type="text/javascript">
$(function(){
$('a').hover(function(){
$(this).toggleClass('color');
});
})
</script>
|
monolithed, подразумевается, что .color {color: black;} добавляется динамически? Зачем здесь jQuery?
p.s. а когда пользователь уберет мышь? |
Цитата:
Цитата:
Цитата:
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<style type="text/css">
a {color: red;}
.color {color: black;}
</style>
<a href="#" class="color">наведи</a>
<script type="text/javascript">
$(function(){
$('a').hover(function(){
$(this).toggleClass('color');
});
})
</script>
|
Цитата:
|
У меня функция цепляется практически к любому элементу с классом ".price" (DIV, TR, P, SPAN и т.д.)
А главное люблю когда код красивый и если пишу с использованием JQuery на сайте - то предпочитаю все функции на нём реализовывать, чтоб код не запутывать ... Спасибо monolithed у меня второй this оказывается мона опустить :) я не подумал об этом |
| Часовой пояс GMT +3, время: 11:12. |