请参阅: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*/
});
答案 0 :(得分: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>
答案 1 :(得分:0)
我认为这就是你要找的东西
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>
答案 2 :(得分:0)
你不需要任何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);
}
答案 3 :(得分:0)
试试这个:
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;
}
网址:Check demo