一个div变大，另一个div变小

Question

我是Java语言的新手，我想知道当我将鼠标悬停在.contact上时，如何将.contact从30％的宽度扩展到40％的宽度。这可行，但是当.contact变大时，我希望.div从70％的宽度减小到60％，所以.div不会在.contact之下。

这是我目前所拥有的：

var width = 30;

var maxWidth = 40;

var interval = null;

var contact = document.getElementById("contact");

function myMove() {
  interval = setInterval(function() {
    if (width>= maxWidth){
      return clearInterval(interval);
    }
    contact.style.width = ++width + "%";
  },5);
} 

.contact{
    background-color:red;
    width:30%;
    float:left;
}
.div{
    background-color: blue;
    width: 70%;
    float: right;    
}

<div class="content">
                
        <div class="contact" id="contact" onmouseover="myMove()">                    
            <h3> Text</h3>
            <p>More textt</p>
        </div>

        <div class="div">
            <h3> Text</h3>
            <p>More textt</p>
        </div>                

</div>

你知道怎么做吗？

Answer 1

您不需要javascript，同级选择器也可以工作。
或者在javascript中，将div缩小到右侧，而将div扩大到左侧。

var width = 30;

var maxWidth = 40;

var interval = null;

var contact = document.getElementById("contact");
var div = document.getElementById("div");
function myMove() {
  interval = setInterval(function() {
    if (width>= maxWidth){
      return clearInterval(interval);
    }
    contact.style.width = ++width + "%";
    div.style.width = (100-width) + "%";
  },5);
}

.contact{
    background-color:red;
    width:30%;
    float:left;
}
.div{
    background-color: blue;
    width: 70%;
    float: right;  
}

<div class="content">
                
        <div class="contact" id="contact" onmouseover="myMove()">                    
            <h3> Text</h3>
            <p>More textt</p>
        </div>

        <div class="div" id="div">
            <h3> Text</h3>
            <p>More textt</p>
        </div>                

</div>

Answer 2

您只能使用CSS

.contact {
  background-color: red;
  width: 30%;
  float: left;
  transition:1s linear;
}

.div {
  background-color: blue;
  width: 70%;
  float: right;
  transition:1s linear;
}

.contact:hover {
  width: 40%;
}

.contact:hover + .div{
  width: 60%;
}

<div class="content">

  <div class="contact" id="contact">
    <h3> Text</h3>
    <p>More textt</p>
  </div>

  <div class="div">
    <h3> Text</h3>
    <p>More textt</p>
  </div>

</div>

以一种更加灵活的方式，您可以考虑在flexbox中只需要更改hover元素，而另一个默认情况下会缩小

.content {
  display: flex;
}

.contact {
  background-color: red;
  flex-basis: 30%;
  transition: 0.5s linear;
}

.div {
  background-color: blue;
  flex-grow:1;
}

.contact:hover {
  flex-basis: 40%;
}

<div class="content">

  <div class="contact" id="contact">
    <h3> Text</h3>
    <p>More textt</p>
  </div>

  <div class="div">
    <h3> Text</h3>
    <p>More textt</p>
  </div>

</div>

更新

如果您想进行永久更改，可以尝试动画：

.content {
  display: flex;
}

.contact {
  background-color: red;
  flex-basis: 30%;
  transition: 0.5s linear;
  animation:big 0.5s linear forwards;
  animation-play-state:paused;
}

.div {
  background-color: blue;
  flex-grow:1;
}

.contact:hover {
  animation-play-state:running;
}
@keyframes big{
  to {flex-basis: 40%;}
}

<div class="content">

  <div class="contact" id="contact">
    <h3> Text</h3>
    <p>More textt</p>
  </div>

  <div class="div">
    <h3> Text</h3>
    <p>More textt</p>
  </div>

</div>

Answer 3

您可以使用Flexbox做到

flex: 1使.contact扩展到其余可用空间。

然后，您只需要定义.div的宽度和悬停.contact时的宽度。

.content {
  display: flex;
}

.contact{
  background-color:red;
  flex: 1
}

.div {
  width: 70%;
  background-color: blue;  
}

.contact:hover + .div {
  width: 60%
}

<div class="content">       
  <div class="contact" id="contact">                    
    <h3> Text</h3>
    <p>More textt</p>
  </div>
  <div class="div">
    <h3> Text</h3>
    <p>More textt</p>
  </div>                
</div>