如何增加课堂中某些东西的大小，但不能增加课堂中的其他元素？

比方说，我有一个div内有四个图像。它们都具有的5.5％的宽度如何增加课堂中某些东西的大小，但不能增加课堂中的其他元素？

[_o__o__o__o_]

我想用JavaScript来改变是将鼠标悬停在（悬停上）的目标，并让它看起来像这样：

[_o__O__o__o_ ]

所以我提出的目标增加然而它也推动其它元件侧而不是停留的宽度，他们是这样它更像：

[_o___O___o__o_]

我不知道如何让其他元素保持在他们所在的位置而不是被推送。

问题是，我成功地能够改变宽度。但是改变一个元素的宽度会将周围的元素分别推向左边和右边。 jsbin：https://jsbin.com/zujutamazo/edit?html,css,js,output

来源

2015-11-09 Allison Stafford

显示你的代码...使用jsbin或的jsfiddle –

我的代码获得了”在jsfiddle上运行，因为我依靠一个for循环来改变我的*本地*图片去img1，img2，img3，e tc。 –

只是使用placholder图片像http://placekitten.com/ –

正如我在解释，你需要设置一个更高的z-索引，以“超越”非悬停框。并设置负向左右边距，相当于悬停时的附加宽度，以防止任何事物四处移动。

下面是一个有百分比的工作示例。

body { 
 
     width: 300px; 
 
     height: 100px; 
 
    } 
 
     
 
.myClass { 
 
    width: 20%; 
 
    height: 50%; 
 
    position: relative; 
 
    z-index: 1; 
 
    float: left; 
 
    } 
 
    
 
    .myClass:hover { 
 
    width: 30%; 
 
    height: 70%; 
 
    z-index: 10; 
 
    margin: 0 -5%; 
 
    } 
 
    
 
    body .myClass:nth-child(1) { 
 
    background-color: red; 
 
    } 
 
    
 
    body .myClass:nth-child(2) { 
 
    background-color: green; 
 
    } 
 
    
 
    body .myClass:nth-child(3) { 
 
    background-color: blue; 
 
    } 
 
    
 
    body .myClass:nth-child(4) { 
 
    background-color: yellow; 
 
    }

<html> 
 
<head> 
 
    
 
</head>  
 
<body> 
 
    <div class="myClass"></div> 
 
    <div class="myClass"></div> 
 
    <div class="myClass"></div> 
 
    <div class="myClass"></div> 
 
</body> 
 
</html>

来源

2015-11-09 23:19:15

我意识到我可以用悬停做到这一点，但我选择不是因为我依靠变化被实施到其他JavaScript功能。你的回答没有解决我遇到的问题。 –

你需要使用'onmouseover'事件来触发你的javascript函数。和'onmouseout'来重置样式。 –

我意识到这一点 - 再次，而不是我遇到的问题。使用onmouseover不是问题，问题在于CSS。我可以成功地将宽度从5.5％改变为9％，并且*工作*，但其他元素因此改变了他们的位置，这似乎是一个CSS问题。 –

您可以使用Flexbox，就为这一个：

.wrapper { 
 
\t \t display: flex; 
 
\t \t display: -webkit-flex; 
 
\t \t display: -moz-flex; 
 
     width: 400px; 
 
    background-color: red; 
 
} 
 

 
.item { 
 
    position: relative; 
 
    width: 25%; 
 
    height: 200px; 
 
} 
 

 
.circle { 
 
    position: absolute; 
 
    bottom: 20px; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    background: white; 
 
    width: 20px; 
 
    height: 20px; 
 
    border-radius: 50%; 
 
    transition: all .3s; 
 
} 
 

 
.item1 { background-color: blue; } 
 
.item2 { background-color: red; } 
 
.item3 { background-color: orange; } 
 
.item4 { background-color: yellow; } 
 

 
.item:hover .circle{ 
 
    background-color: black; 
 
    height: 40px; 
 
    width: 40px; 
 
}

<div class="wrapper"> 
 
\t <div class="item item1"> 
 
     <div class="circle"></div> 
 
    </div> 
 
\t <div class="item item2"> 
 
     <div class="circle"></div> 
 
    </div> 
 
\t <div class="item item3"> 
 
     <div class="circle"></div> 
 
    </div> 
 
\t <div class="item item4"> 
 
     <div class="circle"></div> 
 
    </div> 
 
</div>

来源

2015-11-09 23:21:36 edonbajrami

当其他三个变得更小，并且当悬停在红色/橙色时，两侧移出。 – Leeish

正好^我需要其他三个保持相同 –

当我将鼠标放在红色元素上，例如，橙色框的右边缘向右移动。我希望它保持不变 –

如何增加课堂中某些东西的大小，但不能增加课堂中的其他元素？

回答

相关问题