1
그래서 나는 CSS 페이드 애니메이션을 가져 왔습니다. 여기에 홈페이지의 6 개 사각형 버튼 밖으로jQuery에서 li 요소 위로 마우스를 가져 가면 대상 범위가 어떻게됩니까
는 리튬의 UL 인증의 하나 위에 마우스를 올려 . 상자의 제목이 움직이는 파란색 영역입니다. 그러나 IE에서는 애니메이션없이 흰색으로 완전히 전환됩니다.
그래서 내가 해결하기 위해 jQuery를 (내가 jQuery를 멍청한 놈이야) 사용하려고 만
IE
<!--[if IE 9]>
<script>
$("ul#home_blocks li").hover(function(){$(this).next('span');.fadeOut(150);$(this).next('span');.fadeIn(300);});
</script>
<![endif]-->
작품 아래에이 코드에! 그러나 그것은 전체 li 대신 스팬 위로 마우스를 가져 가면 작동합니다. 스팬을 제거하면 전체 블록이 내가하려는 것을 움직이지 않게됩니다.
<!--[if IE 9]>
<script>
$("ul#home_blocks li span").hover(function(){$(this).fadeOut(150);$(this).fadeIn(300);});
</script>
<![endif]-->
오늘 오후에 어떤 조언이 있습니까? :) 여기
는 HTML & CSS입니다 :<ul id="home_blocks">
<li>
<a href="http://athenasweb.com/category/aspects/" title="Check out Weekly Aspects"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_aspects.jpg" alt="Weekly Aspects"/>
<span class="block_title">Weekly Aspects</span></a>
</li>
<li>
<a href="http://athenasweb.com/category/daily-planets/" title="Check out Daily Planets"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_planets.jpg" alt="Daily Planets"/>
<span class="block_title">Daily Planets</span></a>
</li>
<li>
<a href="http://athenasweb.com/category/column/" title="Read the Column"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_column.jpg" alt="Column"/>
<span class="block_title">Column</span></a>
</li>
<li>
<a href="http://www.athenasweb.com/astro101.html" title="Learn some Astrology"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_astrology.jpg" alt="Astrology 101"/>
<span class="block_title">Astrology 101</span></a>
</li>
<li>
<a href="http://www.athenasweb.com/athena.html" title="Learn about Athena"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_athena.jpg" alt="Athena"/>
<span class="block_title">Athena</span></a>
</li>
<li>
<a href="http://www.athenasweb.com/hitsIII.html" title="Learn some Mythology"><img class="blocks" src="<?php bloginfo("template_url"); ?>/images/block_mythology.jpg" alt="World Mythology"/>
<span class="block_title">World Mythology</span></a>
</li>
</ul>
CSS :
#home_blocks { position: relative; margin-top: 20px; list-style: none; }
#home_blocks li { position: relative; display: block; float: left; margin: 0 15px 20px 0; width: 310px; height: 401px; border-bottom: 1px solid #4098db; text-align: center; font-family: 'Raleway', sans-serif; font-size: 25px; font-weight: 900; background: #4098db;
/*opacity: 1.0;
filter:alpha(opacity=100); */
-webkit-transition: background .2s; -moz-transition: background .2s; -ms-transition: background .2s; transition: background .2s; }
#home_blocks a { color: white; text-shadow: 0 1px 0 #666; }
#home_blocks li:nth-child(3n) { margin: 0 0 20px 0; }
#home_blocks li a { -webkit-transition: color 1s; -moz-transition: color 1s; -ms-transition: color 1s; transition: color 1s; }
#home_blocks a:hover { color: #4098db; text-shadow: 0 1px 0 #ccc; cursor: pointer; }
#home_blocks li:hover {
background: white; border-bottom: 1px dotted #4098db;
/*opacity:0.95; filter:alpha(opacity=95); */
}
.block_title { display: block; position: absolute; bottom: 0px; left: 0; padding:25px 0 20px 0; width: 310px; z-index: 999; }
.blocks { z-index: 1; }
질문의 일부로 관련 HTML 코드를 포함하십시오. –
죄송합니다, HTML과 CSS가 추가되었습니다! –
';'문을 닫고 모든 jQuery 메쏘드 사이에서 그것을 사용하기 때문에 무효화됩니다. – adeneo