将鼠标悬停在一个div上时，更改其他div的类 [英] Change class of other div when hovering on one div

查看：106
本文介绍了将鼠标悬停在一个div上时，更改其他div的类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有四个 div 。当我悬停一个 div 时，其 height 和 width 与动画。我想要的东西，当我悬停在一个 div 它的大小增加和其他3 div 大小正在减少。 >

我完成，直到增加 div 的大小悬停我不明白如何更改所有其他 div 。



这是我的HTML和CSS。



  .style_prevu_kit {display：inline-block; border：0; width：196px; height：210px;位置：相对; -webkit-transition：all 200ms ease-in; -webkit-transform：scale（1）; -ms-transition：all 200ms ease-in; -ms-transform：scale（1）; -moz-transition：all 200ms ease-in; -moz-transform：scale（1）;过渡：全部200ms缓入;变换：scale（1）; background-color：＃00a096;}。style_prevu_kit：hover {box-shadow：0px 0px 150px＃000000; z-index：2; -webkit-transition：all 200ms ease-in; -webkit-transform：scale（1.5）; -ms-transition：all 200ms ease-in; -ms-transform：scale（1.5）; -moz-transition：all 200ms ease-in; -moz-transform：scale（1.5）;过渡：全部200ms缓入; transform：scale（1.5）;}  

 < div align =center> < div style =width：1000px;> < div id =s1class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s3class =style_prevu_kit>< / div> < / div>< / div>



解决方案

不需要Javascript / jQuery，你可以使用CSS。您可以利用：hover CSS类。


  1. container的：hover 来动画化（减小）元素的维度。例如： .container> div：hover〜div {设置所有其他< div> 元素的样式

    2. b b b b p> 

      .container {width：1000px;} container：hover div：not（：hover）{box-shadow：0px 0px 150px＃000000; z-index：2; -webkit-transition：all 200ms ease-in; -webkit-transform：scale（1.5）; -ms-transition：all 200ms ease-in; -ms-transform：scale（1.5）; -moz-transition：all 200ms ease-in; -moz-transform：scale（1.5）;过渡：全部200ms缓入; transform：scale（.5）;}。style_prevu_kit {display：inline-block; border：0; width：196px; height：210px;位置：相对; -webkit-transition：all 200ms ease-in; -webkit-transform：scale（1）; -ms-transition：all 200ms ease-in; -ms-transform：scale（1）; -moz-transition：all 200ms ease-in; -moz-transform：scale（1）;过渡：全部200ms缓入;变换：scale（1）; background-color：＃00a096;}。container .style_prevu_kit：hover {box-shadow：0px 0px 150px＃000000; z-index：2; -webkit-transition：all 200ms ease-in; -webkit-transform：scale（1.5）; -ms-transition：all 200ms ease-in; -ms-transform：scale（1.5）; -moz-transition：all 200ms ease-in; -moz-transform：scale（1.5）;过渡：全部200ms缓入; transform：scale（1.5）;}  

     < div align =center> < div class =container> < div id =s1class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s3class =style_prevu_kit>< / div> < / div>< / div>



    更新



    因为，当两个元素之间悬停所有元素都合同时，有一些问题，最好使用Javascript。

    您可以使用 siblings（）

    / code>选择当前元素的所有同级元素。



      $（'container .style_prevu_kit'）。hover function（）{$（this）.siblings（'。style_prevu_kit'）。addClass（'animate'）;}，function（）{$（this）.siblings（'。style_prevu_kit'）。 }）;  

      .container {width：1000px;} div .animate {box-shadow：0px 0px 150px＃000000; z-index：2; -webkit-transition：all 200ms ease-in; -webkit-transform：scale（1.5）; -ms-transition：all 200ms ease-in; -ms-transform：scale（1.5）; -moz-transition：all 200ms ease-in; -moz-transform：scale（1.5）;过渡：全部200ms缓入; transform：scale（.5）;}。style_prevu_kit {display：inline-block; border：0; width：196px; height：210px;位置：相对; -webkit-transition：all 200ms ease-in; -webkit-transform：scale（1）; -ms-transition：all 200ms ease-in; -ms-transform：scale（1）; -moz-transition：all 200ms ease-in; -moz-transform：scale（1）;过渡：全部200ms缓入;变换：scale（1）; background-color：＃00a096;}。container .style_prevu_kit：hover {box-shadow：0px 0px 150px＃000000; z-index：2; -webkit-transition：all 200ms ease-in; -webkit-transform：scale（1.5）; -ms-transition：all 200ms ease-in; -ms-transform：scale（1.5）; -moz-transition：all 200ms ease-in; -moz-transform：scale（1.5）;过渡：全部200ms缓入; transform：scale（1.5）;}  

     < script src =https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js>< / script>< div align =center> < div class =container> < div id =s1class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s2class =style_prevu_kit>< / div> < div id =s3class =style_prevu_kit>< / div> < / div>< / div>


    I have four divs. When I hover one div, its height and width increase with animation. I want something like when I hover on one div its size increases and other 3 div sizes are decreasing.

    I am done till increase size of div on hover I don't understand how to change size of all other divs at one time.

    Here is my HTML and CSS.

    .style_prevu_kit {
  display: inline-block;
  border: 0;
  width: 196px;
  height: 210px;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
  background-color: #00a096;
}
.style_prevu_kit:hover {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}

    <div align="center">
  <div style="width:1000px;">
    <div id="s1" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s3" class="style_prevu_kit"></div>
  </div>
</div>

    anyone please helpme

    解决方案

    No need of Javascript/jQuery, you can do this using CSS only. You can take advantage of :hover class of CSS.

    1. You can use the container's :hover to animate(decrease) the dimension of the elements. Ex: .container>div:hover ~ div { to set the styles of all the other <div> elements than the hovered element
    2. You can animate(increase) the dimensions of the element that is hovered

    .container {
  width: 1000px;
}
.container:hover div:not(:hover) {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(.5);
}
.style_prevu_kit {
  display: inline-block;
  border: 0;
  width: 196px;
  height: 210px;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
  background-color: #00a096;
}
.container .style_prevu_kit:hover {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}

    <div align="center">
  <div class="container">
    <div id="s1" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s3" class="style_prevu_kit"></div>
  </div>
</div>

    Update

    Because, there are some issues when hovering between the two elements all the elements are contracted, it's better to use Javascript. No need of Javascript/jQuery, I'm taking back my words.

    You can use siblings() to select all the sibling elements of the current elements.

    $('.container .style_prevu_kit').hover(function() {
  $(this).siblings('.style_prevu_kit').addClass('animate');
}, function() {
  $(this).siblings('.style_prevu_kit').removeClass('animate');
});

    .container {
  width: 1000px;
}
div.animate {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(.5);
}
.style_prevu_kit {
  display: inline-block;
  border: 0;
  width: 196px;
  height: 210px;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1);
  transition: all 200ms ease-in;
  transform: scale(1);
  background-color: #00a096;
}
.container .style_prevu_kit:hover {
  box-shadow: 0px 0px 150px #000000;
  z-index: 2;
  -webkit-transition: all 200ms ease-in;
  -webkit-transform: scale(1.5);
  -ms-transition: all 200ms ease-in;
  -ms-transform: scale(1.5);
  -moz-transition: all 200ms ease-in;
  -moz-transform: scale(1.5);
  transition: all 200ms ease-in;
  transform: scale(1.5);
}

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div align="center">
  <div class="container">
    <div id="s1" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s2" class="style_prevu_kit"></div>
    <div id="s3" class="style_prevu_kit"></div>
  </div>
</div>

    这篇关于将鼠标悬停在一个div上时，更改其他div的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆