Изменение цвета ссылок при наведении на другую облсть
Здравствуйте.
Необходимо сделать, чтобы цвет ссылки заголовка поста изменялся при наведении на область поста. Есть такой код, который не работает:
$(document).ready(init);
function init(){
$('article#post-<?php the_ID(); ?>').hover(hOver, hOut);
}
function hOver(){
$('article#post-<?php the_ID(); ?> h2 a').css("color", "blue");
}
function hOut(){
$('article#post-<?php the_ID(); ?> h2 a').css("color", "white");
}
Что я делаю не так? |
чтобы сказать почему не работает, нужно видеть код, который получается после работы php вставок <?php the_ID(); ?>
и также, нужно видеть html код |
Цитата:
$(document).ready(init);
function init(){
$('article#post-842').hover(hOver, hOut);
}
function hOver(){
$('article#post-842 h2 a').css("color", "blue");
}
function hOut(){
$('article#post-842 h2 a').css("color", "white");
}
HTML примерно такой: <div class="post-box"> <article id="post-842"> <h2><a>Заголовок, цвет которого надо изменть при наведении на область статьи</a></h2> <div class="entry-content"></div> <script type="text/javascript">Здесь заключён jQuery-код</script> </article> </div> Возможно, вам будет удобней посмотреть вживую. Спасибо за помощь! |
по-моему изменение цвета у вас работает
пример ниже, заменил только white на black чтобы не сливался с фоном
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div class="post-box">
<article id="post-842">
<h2><a>Заголовок, цвет которого надо изменть при наведении на область статьи</a></h2>
<div class="entry-content">text text text text text text text text text text
text text text text text text text text text text </div>
<script>
$(document).ready(init);
function init(){
$('article#post-842').hover(hOver, hOut);
}
function hOver(){
$('article#post-842 h2 a').css("color", "blue");
}
function hOut(){
$('article#post-842 h2 a').css("color", "black");
}
</script>
</article>
</div>
</body>
</html>
|
Да, так работает. Но почему же тогда на сайте такого не происходит, с чем это может быть связано?
p.s. при таком коде работает, но как видно, при наведении на любую статью изменяется цвет заголовков всех статей. Т. е. всё рушится при добавлении #post-<?php the_ID(); ?>. Возможно эта информация будет полезна.
function init(){
18 $('article').hover(hOver, hOut);
19 }
20 function hOver(){
21 $('article h2 a').css("color", "blue");
22 }
23 function hOut(){
24 $('article h2 a').css("color", "black");
25 }
|
Цитата:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script>
$(document).ready(init);
function init(){
$('article').hover(hOver, hOut);
}
function hOver(){
$(this).find('h2 a').css("color", "blue");
}
function hOut(){
$(this).find('h2 a').css("color", "black");
}
</script>
<div class="post-box">
<article>
<h2><a>Заголовок, цвет которого надо изменть при наведении на область статьи</a></h2>
<div class="entry-content">text text text text text text text text text text
text text text text text text text text text text </div>
</article>
<article>
<h2><a>Заголовок, цвет которого надо изменть при наведении на область статьи</a></h2>
<div class="entry-content">text text text text text text text text text text
text text text text text text text text text text </div>
</article>
</div>
</body>
</html>
|
как то всё равно не заработало. интересно, конечно, в чём причина, но забил и сделал на css примерно так:
.post h2 a {
color:black;
}
.post:hover h2 a {
color:red;
}
|
| Часовой пояс GMT +3, время: 23:32. |