首页 新闻 会员 周边 捐助

请问各位大神关于div选中效果的事

0
悬赏园豆:5 [待解决问题]

下面是border的部分:

<div class="demo">
  <div>中国</div>
  <br/>
  <div>俄国</div>
  <br/>
  <div>泰国</div>
</div>

下面是CSS部分:

.demo div{
  text-align: center;
  line-height: 40px;
  font-weight: bold; 
  border:1px solid #BDCFE4;
  border-radius: 300px;
  margin: 0 auto;
  width: 200px;
  height: 40px;
  border: 1px solid #003BB3;

}

下面是Jquery部分:

$(function(){ 

  $(".demo div").mouseover(function(){
    $(this).css("background-color","#149BDF");
    $(this).css("cursor","pointer")
  })//移入背景变淡蓝色


  $(".demo div").mouseout(function(){
    $(this).css("background-color","white");
  })//移出恢复白色背景色

})

是这样的,我想让class=demo的div里面的3个子div(中国,俄国,泰国这三个div)点击后背景色跟移入的背景色一样点击另一个div后背景色跟移入的背景色一样,但之前点击过的div背景色恢复成白色背景色

请问要怎么做?(里面的div不要去添加ID)

周伯通大弟子的主页 周伯通大弟子 | 初学一级 | 园豆:9
提问于:2016-06-13 10:44
< >
分享
所有回答(4)
0

$(function(){ 

  $(".demo div").click(function(){

    $(".demo div").css("background-color","white");
    $(this).css("background-color","#149BDF");
    $(this).css("cursor","pointer")
  })

})

Cuntain√ | 园豆:332 (菜鸟二级) | 2016-06-13 11:29
0

$(function(){ 

  $(".demo div").click(function(){
    $(this).css("background-color","#149BDF").siblings().css("background-color","white");
    $(this).css("cursor","pointer")
  })

})

月半的我们 | 园豆:217 (菜鸟二级) | 2016-06-13 18:41
0

$(function(){ 

  $(".demo div").click(function(){
    $(this).css("background-color","#149BDF").siblings('div').css("background-color","white");
    $(this).css("cursor","pointer")
  })

})

Hailinlu | 园豆:193 (初学一级) | 2016-06-30 17:40
0

楼上把答案都写了,我就不写源码了。

楼主想要【点击】事件,但自己的代码中却是【鼠标移入】和【移开】,这是问题所在;

对于楼主提及的效果,除了楼上的方法,还可以使用增删class的方法,不过楼主说不要那么 操作,那就复制楼上几位的方法就可以了。或者改自己的事件。

繁华已逝 | 园豆:353 (菜鸟二级) | 2016-07-14 09:52
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册