一个div变大，另一个div变小 [英] one div gets bigger while the other gets smaller

问题描述

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

I'm new to javascript, I'm wondering how to get .contact from a 30% width to 40% when I go with my mouse over .contact. This works, but while .contact gets bigger I want .div to get smaller from 70% width to 60%, so .div won't get under .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>

你知道怎么做吗?

推荐答案

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

You don't need javascript for this, sibling selector works.
Or in javascript, shrink the div on the right while expanding the div on the left.

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>

这篇关于一个div变大，另一个div变小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！