简体   繁体   English

悬停文本时,使用jquery更改其他div的背景

[英]When hover a text, change the background of other div using jquery

When hover the link I am trying to change the background of previous div, But here it is not working here is code Jsfiddle this is my script 当悬停链接时,我试图更改上一个div的背景,但是这里不起作用,这里是代码Jsfiddle,这是我的脚本

$('div a.link').hover(function(){

var icon = $(this).prevAll('div.icon').first();          
          icon.css({'background':'url(http://www.rangde.org/images/icons/circle_grey_hover.jpg) no-repeat', 'color':'#fff','cursor':'pointer'});

 });          

my html 我的HTML

<div class="icon">1</div>
<div><a href="#" class="link">First article</a></div>
<div class="clearfloat"></div>
<div class="icon">2</div>
<div><a href="#" class="link">Second article</a></div>
<div class="clearfloat"></div>
<div class="icon">3</div>
<div><a href="#" class="link">Third article</a></div>

my css 我的CSS

.icon{background: url(http://www.rangde.org/images/icons/circle_grey.jpg) no-repeat;
width: 92px;
height: 97px;
padding: 35px 0px 0px 45px;
font-size: 14pt;
color: black;
font-weight: 600;
width: 32%;float:left;}
.link{width:60%;float:left;color:#048ccc;font-weight:600;padding-top:30px;}
.clearfloat{clear:both;}
​
 $('div a.link').hover(function(){
     var icon = $(this).parent().prev();          
     icon.css({'background':'url(http://www.rangde.org/images/icons/circle_grey_hover.jpg) no-repeat', 'color':'#fff','cursor':'pointer'});
 }, function() {
     var icon = $(this).parent().prev().css({'background':'none'});
 });           

​

http://jsfiddle.net/FEdk9/9/ http://jsfiddle.net/FEdk9/9/

Why use jQuery when you can do this with just css? 如果仅用CSS就能做到这一点,为什么还要使用jQuery? http://jsfiddle.net/czW5d/ http://jsfiddle.net/czW5d/

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM