Форум

iHun · #1 (**permalink**) 09.05.2012, 08:54

Здравствуйте.
Необходимо сделать, чтобы цвет ссылки заголовка поста изменялся при наведении на область поста. Есть такой код, который не работает:

$(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");
		   }

Что я делаю не так?

Pavel M. · #2 (**permalink**) 09.05.2012, 10:21

чтобы сказать почему не работает, нужно видеть код, который получается после работы php вставок <?php the_ID(); ?>

и также, нужно видеть html код

iHun · #3 (**permalink**) 09.05.2012, 15:26

Сообщение от Pavel M.

чтобы сказать почему не работает, нужно видеть код, который получается после работы php вставок <?php the_ID(); ?>

и также, нужно видеть html код

jQuery:

$(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>

Возможно, вам будет удобней посмотреть вживую.
Спасибо за помощь!

Pavel M. · #4 (**permalink**) 09.05.2012, 22:07

по-моему изменение цвета у вас работает
пример ниже, заменил только 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>

iHun · #5 (**permalink**) 10.05.2012, 21:17

Да, так работает. Но почему же тогда на сайте такого не происходит, с чем это может быть связано?
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	          }

Pavel M. · #6 (**permalink**) 10.05.2012, 23:20

Сообщение от iHun

при наведении на любую статью изменяется цвет заголовков всех статей

попробуйте так

<!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>

iHun · #7 (**permalink**) 15.05.2012, 19:52

как то всё равно не заработало. интересно, конечно, в чём причина, но забил и сделал на css примерно так:

.post h2 a {
  color:black;
}

.post:hover h2 a {
  color:red;
}

Форум

Справочник

Discord чат

Курсы javascript