3个动态内联div不能保持原位

Question

我正在制作一个简单的3 div布局。 div的宽度均设置为33.3%，高度设置为100%。我想要发生的事情是将鼠标悬停在任何一个div上，div扩展到40%宽度，而其他两个则各自的宽度减少3.5% 。不幸的是，正在发生的是右边的div下降到下一行。

我非常有信心我可以使用jQuery轻松完成这项工作，但我更喜欢能用纯css做到这一点。

这是代码的小提琴：

https://jsfiddle.net/99gL47rp/1/

任何帮助表示赞赏！ ：）

Answer 1

你完全可以做到这一点！你只需要稍微考虑一下就可以了。 https://jsfiddle.net/jpw4w7ou/

/*Use this to give all the child divs the same 33% width */
#sections > div {
    width: 33.3%;
}

/*On hover of the container, drop ALL the children's width to 30% */
#sections:hover > div {
    width: 30%;
    transition:width 0.5s;
}

/*Finally, give the actual child div you are hovering over a width of 40%. This will override the previous selector's 30% width only for the currently hovered element */
#sections > div:hover{
    width: 40%;
    transition:width 0.5s;
}

请注意，我删除了clear:left，这是没有必要的并且导致了问题。

Answer 2

使用CSS Flex方法，您可以非常轻松地实现此目的，只需使用%值，并且必须使用word-wrap: break-word;将长文本分解为下一行。检查Demo。

.flex
   {
      /* basic styling */
      width: 100%;
      height: 200px;
      border: 1px solid #555;
      font: 14px Arial;

      /* flexbox setup */
      display: -webkit-flex;
      -webkit-flex-direction: row;

      display: flex;
      flex-direction: row;
   }

   .flex > div
   {    -ms-transform-origin: 0 100%;
-webkit-transform-origin:0 100%;
transform-origin:  0 100% ;
      -webkit-flex: 1 1 auto;
      flex: 1 1 auto;
word-wrap: break-word;
      width: 30%;
      -webkit-transition: width 0.7s ease-out;
      transition: width 0.7s ease-out;
   }

   /* colors */
   .flex > div:nth-child(1){ background : #009246; }
   .flex > div:nth-child(2){ background : #F1F2F1; }
   .flex > div:nth-child(3){ background : #CE2B37; }

   .flex > div:hover
   {
        width: 40%;
   }
   

  <div class="flex">
    <div>portttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>
    <div>pricinggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
    <div>portttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt</div>
  </div>

Answer 3

我不这么认为它只能由css做过。你需要使用像

这样的jquery

$( "#pricing" ).hover(
  function() {
    $('#portfolio').css('width','30%');
    $('#contact').css('width','30%');
  }, function() {
    $('#portfolio').css('width','33.3%');
    $('#contact').css('width','33.3%');
  }
);

https://jsfiddle.net/mike_manish/99gL47rp/7/

Answer 4

我们无法在另一个id或类的鼠标悬停事件中定位另一个id或类。

Answer 5

您可以按照以下方式执行此操作：

＆＃13;

＆＃13;

body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	font-family: "verdana", sans-serif;
}
#nav-bar{
	width: 100%;
	height: 70px;
	top: 0;
	background-color: #000000;
	opacity: 0.5;
	position: fixed;
}
#sections{
	margin-top: 70px;
}
#pricing{
	width: 33.3%;
	height: 100%;
	display: inline;
	float: left;
	position: relative;
	word-wrap: break-word;
	background-color: #ff0000;
}
#pricing:hover {
	clear: left;
    width: 40%;
	transition:width 0.5s;
}
#pricing:hover ~ #portfolio {
    width: 30%;
	transition:width 0.5s;
}
#pricing:hover ~ #contact {
    width: 30%;
	transition:width 0.5s;
}
#portfolio{
	width: 33.3%;
	height: 100%;
	display: inline;
	float: left;
	position: relative;
	word-wrap: break-word;
	background-color: #00ff00;
}
#portfolio:hover {
	clear: left;
    width: 40%;
	transition:width 0.5s;
}
#contact{
	width: 33.3%;
	height: 100%;
	display: inline;
	float: left;
	position: relative;
	word-wrap: break-word;
	background-color: #0000ff;
}
#contact:hover {
	clear: left;
    width: 40%;
	transition:width 0.5s;

＆＃13;

<div id="nav-bar">
</div>
<div id="sections">
<div id="pricing">
pricinggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg
</div>

<div id="portfolio">
portttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>

<div id="contact">
contacttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>
</div>

＆＃13;

＆＃13;

＆＃13;