CSS：在div元素悬停时使用〜或+为另一个div设置动画

Question

我已经尝试了许多方法来使其正常运行，但是没有成功..我注意到这个问题已经被问过几次了，我已经尝试了找到的解决方案..但是没有成功。

因此，如果你们中有人发现这个问题重复的话，我会先对不起：(

悬停的元素是“ food-box”，需要缩放动画的元素是“ food-box-image”：

 <div class="food-box">
        <div class="food-box-image" style="background-image: url(myimage.jpg);"></div>

...并且我正在尝试使动画像这样工作：

 .food-box:hover ~ .foox-box-image {
        -moz-transform: scale(1.1);
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
  border:8px solid red;
}

但不会触发：

我让它工作的唯一方法是指定.food-box-image：hover，但是将鼠标悬停在所需的div元素上时不会触发。

这是完整的代码（可以运行）：

有人知道怎么做吗 ？

 .fixedbuttons-container { position: absolute; width: 100%; } .buttons, .fixedbuttons { display: flex; flex-flow: row wrap; } .fixedbuttons > * { width: 25%; } .fixedbuttons > * > * { width: 100%; text-align: center; } .food-box-container { padding: 10px; } .food-box { flex: 1; position: relative; background-color: white; min-height: 300px; background-color: #ffffff; -webkit-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); border-color: #666666; border: 1px solid #666666; word-wrap: break-word; margin: 0 !important; padding: 0 !important; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box:hover { cursor: pointer; -webkit-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); -moz-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box:hover ~ .foox-box-image { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); border:8px solid red; } .food-box .food-box-image { position: absolute top: 0 left: 0; background-size: cover; width: 100%; min-height: 150px; background-color: #ffffff; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .food-box .food-box-content { -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; position: absolute bottom: 0 left: 0; word-wrap: break-word; width: 100%; min-height: 150px; background-color: #ffd531; color: #000000; font-size: 80%; padding-top: 60px; padding-left: 5px; padding-right: 5px; } .food-box:hover > .food-box .food-box-content { background: yellow !important; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box .food-box-badge { display: table; background: #ffffff !important; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; height: 100px; line-height: 100px; border-radius: 50%; font-size: 12px; color: #000000; text-align: center; -webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); border-color: #d3e0e9; border: 1px solid #b3c9e5; padding-left: 10px; padding-right: 10px; } .food-box .food-box-badge span { color: #666; display: table-cell; vertical-align: middle; line-height: 1.2em; word-wrap: break-word; } 

 <div class="fixedbuttons-container"> <div class="fixedbuttons"> <div> <a> <div class="food-box-container"> <div class="food-box"> <div class="food-box-image" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div> <div class="food-box-badge"><span>Sydhavsmeny</span></div> <div class="food-box-content"> adslkfjaølkfj </div> </div> </div> </a> </div> <div> <a> <div class="food-box-container"> <div class="food-box"> <div class="food-box-image scalable" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div> <div class="food-box-badge"><span>Sydhavsmeny</span></div> <div class="food-box-content"> adslkfjaølkfj </div> </div> </div> </a> </div> </div </div> 

Answer 1

第一个是拼写错误foox* ，将替换为.food-box:hover > .foox-box-image

现在，如果您只想在容器盒中缩放，请应用overflow: hidden在包装food-box即food-box

希望这就是您的期望。

 .fixedbuttons-container { position: absolute; width: 100%; } .buttons, .fixedbuttons { display: flex; flex-flow: row wrap; } .fixedbuttons > * { width: 25%; } .fixedbuttons > * > * { width: 100%; text-align: center; } .food-box-container { padding: 10px; } .food-box { overflow: hidden; flex: 1; position: relative; background-color: white; min-height: 300px; background-color: #ffffff; -webkit-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.35); border-color: #666666; border: 1px solid #666666; word-wrap: break-word; margin: 0 !important; padding: 0 !important; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box:hover { cursor: pointer; -webkit-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); -moz-box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); box-shadow: 0px 0px 20px 4px rgba(255, 255, 255, 0.35); -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box:hover > .food-box-image { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .food-box .food-box-image { position: absolute top: 0 left: 0; background-size: cover; width: 100%; min-height: 150px; background-color: #ffffff; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .food-box .food-box-content { -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; position: absolute bottom: 0 left: 0; word-wrap: break-word; width: 100%; min-height: 150px; background-color: #ffd531; color: #000000; font-size: 80%; padding-top: 60px; padding-left: 5px; padding-right: 5px; } .food-box:hover > .food-box .food-box-content { background: yellow !important; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; -webkit-transition: all .1s ease-in; transition: all .1s ease-in; } .food-box .food-box-badge { display: table; background: #ffffff !important; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100px; height: 100px; line-height: 100px; border-radius: 50%; font-size: 12px; color: #000000; text-align: center; -webkit-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); -moz-box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); box-shadow: 0px 0px 39px 4px rgba(0, 0, 0, 0.75); border-color: #d3e0e9; border: 1px solid #b3c9e5; padding-left: 10px; padding-right: 10px; } .food-box .food-box-badge span { color: #666; display: table-cell; vertical-align: middle; line-height: 1.2em; word-wrap: break-word; } 

 <div class="fixedbuttons-container"> <div class="fixedbuttons"> <div> <a> <div class="food-box-container"> <div class="food-box"> <div class="food-box-image" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div> <div class="food-box-badge"><span>Sydhavsmeny</span></div> <div class="food-box-content"> adslkfjaølkfj </div> </div> </div> </a> </div> <div> <a> <div class="food-box-container"> <div class="food-box"> <div class="food-box-image scalable" style="background-image: url(https://assets.epicurious.com/photos/57c5c6d9cf9e9ad43de2d96e/master/pass/the-ultimate-hamburger.jpg);"></div> <div class="food-box-badge"><span>Sydhavsmeny</span></div> <div class="food-box-content"> adslkfjaølkfj </div> </div> </div> </a> </div> </div </div>