当用户将鼠标悬停在div上时，我试图为SVG的元素设置动画。我曾尝试单独使用CSS然后使用Snap SVG，但似乎都没有工作，我无法弄清楚我错过了什么。基本上，每当用户将鼠标悬停在容器上时，我都希望气泡上升。＃FirstColumnBasic＆＃34; DIV。这是我的HTML：
<div class="TwoColContainerBasic">
<div class="FirstColumnBasic">
<h6><a href="#">Science</a></h6>
<div id="svgwrapper" style="width:100px;float:right;">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 248.63 406.608">
<path fill="#DCD9D8" d="M91.94,6.662c12.13-8.99,29.92-8.8,42.05,0.08c4.271,2.71,7.061,7.01,10.341,10.74
c9.319-4.85,20.79-4.96,30.27-0.479c11.53,4.84,20.14,15.93,22.01,28.289c0.471,2.57,0.07,5.311,0.841,7.811
c6.289,2.24,12.67,4.89,17.329,9.87c6.36,6.359,9.79,15.399,9.86,24.34c-0.33,7.65-2.88,15.37-7.86,21.26
c-5.069,6.141-12.359,10.34-20.17,11.83c-3.54,6.51-7.92,12.811-14.479,16.57c-9.84,6.53-22.58,7.069-33.54,3.26
c0.01,2.35,0.02,4.71,0.03,7.08c3.819,0.14,7.71-0.26,11.479,0.479c3.46,1.82,4.101,7,1.88,10c-3.279,3.07-8.16,1.7-12.2,2.351
c0.12,32.39,0.03,64.79,0.04,97.18c0.021,1.25,0.07,2.61,0.851,3.681c22.28,32.77,44.399,65.67,66.64,98.479
c10.33,15.66,21.23,30.96,31.32,46.771c-16.36,0.71-32.771,0.1-49.141,0.31c-59.67-0.01-119.339-0.01-179,0
c-6.83-0.08-13.67,0.21-20.49-0.23c6.72-10.939,14.29-21.34,21.33-32.069c25.17-37.2,50.33-74.431,75.47-111.65
c0.86-1.63,0.74-3.55,0.86-5.33c-0.07-32.399,0.1-64.819-0.271-97.2c-2.95-0.25-6.03,0.04-8.86-0.96
c-4.819-1.89-4.12-10.51,0.971-11.5c4.16-0.54,8.359-0.35,12.54-0.59c-0.11-5.6-0.04-11.189-0.08-16.779
c-4.061,3.01-8.12,6.239-13.07,7.63c-9.68,3.609-20.83,1.89-29.45-3.591c-7.09-4.72-12.41-12.06-14.66-20.27
c-1.36-6.89-1.2-14.2,1.31-20.82c-4.41-6.859-8.06-14.609-7.79-22.97c-0.02-13.07,7.76-25.81,19.47-31.66
c5.76-3.28,12.5-3.83,18.99-3.87C77.42,23.742,82.65,12.832,91.94,6.662z"/>
<path fill="#FFFFFF" d="M101.21,10.952c13.609-7.02,32.76,0.51,37.17,15.22c-2.36,3.119-5.62,5.729-6.41,9.79
c3.31-1.12,5.25-4.221,8.03-6.15c5.979-4.21,12.939-7.97,20.5-7.39c9.229-0.04,18.08,4.909,23.2,12.52
c4.46,6.57,5.76,14.9,4.239,22.63c-10.239,2.08-21.58,7.65-24.939,18.28c7.689-6.53,16.2-12.95,26.46-14.53
c13.35-0.979,26.26,10.5,26.66,23.92c0.83,10.021-5.021,20.17-14.051,24.53c-3.47,1.99-7.51,2.24-11.33,3.09
c-2.579,3.72-3.649,8.43-6.96,11.7c-7.329,8.58-19.699,11.65-30.38,8.4c4.37-6.971,2.21-16.561-4.18-21.521
c-3.71-3.189-8.82-3.59-13.49-3.55c0.78,0.91,3.48,1.93,1.88,3.35l-0.659,0.32c-7.921,3.66-9.23,13.46-10.61,21.09
c-1.45-5.33-1.39-11.22,1.1-16.229c1.73-3.341,5.311-5.061,8.75-6.11c-0.72-0.64-1.439-1.271-2.149-1.9
c-7.42,2.33-12.95,9.931-12.051,17.79c0.73,8.78,9.08,15.82,17.83,15.41c0.021,1.851,0.04,3.72,0.051,5.59
c-9.841-0.029-19.681-0.05-29.511,0.011c-0.25-7.221,0.03-14.44-0.159-21.66c-8.351-4.101-12.971-12.79-15.851-21.24
c-1.7-4.56-1.979-9.46-2.53-14.25c-0.909,0.85-1.569,1.95-1.659,3.229c-1.391,8.221,0.81,16.94,5.72,23.641
c0.899,1.32,1.89,2.63,2.47,4.149c-7.59,11-24.56,13.48-35.16,5.46c-7.67-5.289-11.99-15.079-10.66-24.319
c0.46-3.8,2.27-7.23,3.8-10.681c-6.93-6.649-11.26-16.67-9.08-26.289c2.14-11.221,11.86-20.551,23.22-22.011
c6.88-0.93,13.67,1.4,19.88,4.16c5.51,2.47,9.92,6.67,14.68,10.29c-2-9.13-11.52-13.37-19.25-16.81
c-0.23-4.57-0.58-9.29,0.81-13.721C89.15,20.152,94.28,13.962,101.21,10.952z"/>
<g>
<path fill="#E66727" d="M137.61,111.242c1.601-1.42-1.1-2.439-1.88-3.35c4.67-0.04,9.78,0.36,13.49,3.55
c6.39,4.96,8.55,14.55,4.18,21.521c-2.85,4.81-8.02,8.1-13.58,8.649c-8.75,0.41-17.1-6.63-17.83-15.41
c-0.899-7.859,4.631-15.46,12.051-17.79c0.71,0.63,1.43,1.261,2.149,1.9c-3.439,1.05-7.02,2.77-8.75,6.11
c-2.489,5.01-2.55,10.899-1.1,16.229c1.38-7.63,2.689-17.43,10.61-21.09L137.61,111.242z"/>
</g>
<path id="bottle" fill="#E66727" d="M108.64,197.572c9.51,0.061,19.03,0.05,28.55,0.01c0,22.24,0.03,44.49-0.02,66.74
c-0.07,1.48,0.26,2.96,1.02,4.25c8.771,15.21,17.62,30.391,26.34,45.641c16.131,26.51,32.41,52.93,48.511,79.46
c-54.86-0.21-109.721-0.9-164.58-1.23c-5.52-0.12-11.06,0.07-16.57-0.28c-0.02-0.359-0.05-1.069-0.06-1.42
c11.03-17.31,21.98-34.68,32.98-52.02c8.23-12.91,16.51-25.8,23.9-39.21c6.6-11.45,13.37-22.811,19.74-34.37
C108.86,242.642,108.46,220.092,108.64,197.572z"/>
<g id="bubble1">
<path fill="#E66727" d="M121.398,262.395c8.919-1.689,18.22,5.07,19.53,14.021c1.078,6.08-1.891,12.28-6.602,16.06
c-5.82,4.17-14.099,4.201-19.938,0.061c-4.171-3.35-7.23-8.46-6.881-13.95C107.448,270.746,113.858,263.866,121.398,262.395z"/>
<path fill="#FFFFFF" d="M113.217,270.256c2.08-3.681,6.41-5.441,10.48-5.57c-8.53,4.07-10.57,14.22-12.09,22.619
C110.638,281.656,110.238,275.406,113.217,270.256z"/>
</g>
<g id="bubble2">
<path fill="#E66727" d="M120.689,284.674c8.92-1.689,18.22,5.07,19.53,14.021c1.079,6.08-1.891,12.28-6.601,16.06
c-5.82,4.17-14.1,4.201-19.939,0.061c-4.171-3.35-7.23-8.46-6.881-13.95C106.739,293.025,113.149,286.145,120.689,284.674z"/>
<path fill="#FFFFFF" d="M112.508,292.536c2.08-3.681,6.41-5.441,10.48-5.57c-8.53,4.07-10.57,14.22-12.09,22.619
C109.929,303.935,109.529,297.685,112.508,292.536z"/>
</g>
<g id="bubble3">
<path fill="#E66727" d="M121.398,306.735c8.92-1.689,18.22,5.07,19.53,14.021c1.079,6.08-1.891,12.28-6.601,16.06
c-5.82,4.17-14.1,4.201-19.939,0.061c-4.171-3.35-7.23-8.46-6.881-13.95C107.448,315.085,113.858,308.206,121.398,306.735z"/>
<path fill="#FFFFFF" d="M113.217,314.596c2.08-3.681,6.41-5.441,10.48-5.57c-8.53,4.07-10.57,14.22-12.09,22.619
C110.638,325.996,110.238,319.746,113.217,314.596z"/>
</g>
</svg>
</div>
</div>
</div>
我的CSS：
#bubble1, #bubble2, #bubble3 {
transition: margin-bottom .8s ease-in-out;
-webkit-transition: margin-bottom 5s ease-in-out;
-moz-transition: margin-bottom 5 ease-in-out;
-ms-transition: margin-bottom 5 ease-in-out;
-o-transition: margin-bottom 5 ease-in-out;
}
.FirstColumnBasic:hover > #bubble1. #bubble2, #bubble3 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
}
我知道这一定是我想念的简单事，但我不知所措。
答案 0 :(得分：0)
你的CSS遇到了一些问题。试试这个：
#bubble1,
#bubble2,
#bubble3 {
transition: transform .8s ease-in-out;
-webkit-transition: transform .8s ease-in-out;
-moz-transition: transform .8s ease-in-out;
-ms-transition: transform .8s ease-in-out;
-o-transition: transform .8s ease-in-out;
}
.FirstColumnBasic:hover #bubble1,
.FirstColumnBasic:hover #bubble2,
.FirstColumnBasic:hover #bubble3 {
-webkit-transform: translateY(-100px);
-moz-transform: translateY(-100px);
-o-transform: translateY(-100px);
-ms-transform: translateY(-100px);
transform: translateY(-100px);
}
如果您还希望动画能够重置＆＃34;当用户停止悬停时，请尝试：
.FirstColumnBasic #bubble1,
.FirstColumnBasic #bubble2,
.FirstColumnBasic #bubble3 {
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-o-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
}