在单独的div悬停时缩放图像

Question

参见： https : //jsfiddle.net/8osg70fp/

当鼠标悬停在另一侧的div上时，我在页面的右侧有一个要缩放的图像，就像小提琴一样。

我知道这种格式的东西，但我无法使其正常工作。

var treecontainer=document.getElementById('treecontainer'); //DIV=TREECONTAINER
$(treecontainer).mouseover(function(){
    /*CHANGE IMAGE'S CSS HERE*/    
});
$(treecontainer).mouseleave(function(){
    /*CHANGE IMAGE'S CSS BACK HERE*/    
});

Answer 1

请看一看。 让我知道这是否不是您所需要的。

 .container { display: flex; justify-content: space-between; margin: 20px; } .myhover { width: 100px; height: 100px; background-color: blue; } .myhover:hover + .scaleme { transform: scale(1.2); } 

 <div class="container"> <div class="myhover"></div> <img class="scaleme" src="http://placehold.it/100"> </div> 

Answer 2

我认为这就是您要寻找的

js

  $('div').mouseenter(function(){
     $('.secondone').css({transform:'scale(1.5)'});
 });
$('div').mouseleave(function(){
     $('.secondone').css({transform:'scale(1)'});
 });

的CSS

div {
  height:200px;
  width:200px;
  background-color:black;
  margin:5% 30%;
  transition:.5s ease;
}

<div></div>
<div class="secondone"></div>

https://codepen.io/anon/pen/JJREbL

Answer 3

您不需要任何JavaScript即可执行此操作。 如果在悬停状态下使用CSS比例转换，将获得完全相同的效果，而无需使用不必要的JavaScript。

只有几行CSS

div {
    height:200px;
    width:200px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(https://source.unsplash.com/random);
    transition:.5s ease;
}

div.first:hover + div.second {
    transform: scale(1.2);
}

检查我的笔-https: //codepen.io/Legues/pen/LLRxQg

Answer 4

尝试这个：

的CSS

div {
margin: 150px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transition: all 3s;
}

.div1:hover+ .div2 {
 border: 1px solid black;
-ms-transform: scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* Standard syntax */
transition: all 3s;
}

网址： 查看演示