我使用插图画家在里面创建了一个带有几个矩形的立方体，当有人将鼠标悬停在立方体上但没有任何工作时，我想使用javascript和HTML显示内部的矩形！请帮帮我。
我的HTML是：
<html>
<head>
<meta charset="UTF-8">
<title>snap1.1</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/snap.svg.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<svg id="squares"></svg>
</body>
</html>
javascript是：
$(document).ready(
function () {
var s = Snap("#squares");
Snap.load("./svg/hide_the_world.svg", function (data)
{
flatWorld = data.select("#flatWorld");
s.append(flatWorld);
hoverBoard = s.select("#hideSides");
world = s.select("#world");
leftSide = s.select("#left");
rightSide = s.select("#right");
topSide = s.select("#top");
//hoverBoard.hover(inBoard,outBoard);
//hoverBoard.click(hoverBoardClick);
world.click(clickWorld);
leftSide.click(clickLeft);
rightSide.click(clickRight);
topSide.click(clickTop);
}
);
var inWorld = function () {
}
var outWorld = function () {
$("#world").css("fill","green");
}
var clickTop = function () {
topSide.animate({ transform: 'translate( 0,-1000)' }, 1000, mina.easeinout );
}
var clickLeft = function () {
leftSide.animate({ transform: 'translate(-300,176)' }, 1000, mina.easeinout );
}
var clickRight = function () {
rightSide.animate({ transform: 'translate(300,176)' }, 1000, mina.easeinout );
}
var hoverBoardClick = function () {
hoverBoard.animate({'opacity': 0.0}, 250);
//hoverBoard.animate({ transform: 'translate( 0,-3000)' }, 1000, mina.easeinout );
}
var moveBoard = function () {
//alert("moveBoard");
hoverBoard.transform('translate(0,-1000)');
}
var inBoard = function () {
//alert("bob");
hoverBoard.animate({'opacity': 0.0}, 250, mina.easeinout, moveBoard);
}
var outBoard = function () {
hoverBoard.animate({'opacity': 1.0}, 250);
}
}
);
我不确定您是否需要我的SVG代码，但现在也是如此：
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="flatWorld" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-99 101 600 600" style="enable-background:new -99 101 600 600;" xml:space="preserve">
<style type="text/css">
.st0{fill:#FFFFFF;stroke:#000000;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st1{fill:#FFFFFF;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st2{fill:#FFFFFF;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.st3{fill:none;stroke:#000000;stroke-miterlimit:10;}
.st4{fill:#AF6464;}
.st5{fill:#79C679;}
.st6{fill:#887AC4;}
.st7{fill:#655E8E;}
.st8{font-family:'SnellRoundhand';}
.st9{font-size:4.5217px;}
.st10{fill:#61C6C6;}
.st11{font-size:13.9783px;}
.st12{fill:#B8B9C1;}
.st13{font-family:'Noteworthy-Light';}
.st14{font-size:12px;}
.st15{fill:#659392;}
.st16{fill:#A1D672;}
</style>
<g>
<polygon class="st0" points="214,571.7 40.8,471.7 214,371.7 387.2,471.7 "/>
</g>
<g>
<polygon class="st1" points="214,571.7 40.8,471.7 40.8,271.7 214,371.7 "/>
<polygon class="st1" points="214,371.7 40.8,271.7 214,171.7 387.2,271.7 "/>
<polygon class="st1" points="387.2,471.7 214,571.7 214,371.7 387.2,271.7 "/>
</g>
<g>
<polygon class="st2" points="214,571.7 40.8,471.7 40.8,271.7 214,371.7 "/>
<polygon class="st2" points="214,371.7 40.8,271.7 214,171.7 387.2,271.7 "/>
<polygon class="st2" points="387.2,471.7 214,571.7 214,371.7 387.2,271.7 "/>
</g>
<path class="st2" d="M86.5,298c-4.1,6.8-7.9,13.8-11.6,20.9c-3.3,6.4-16.1,23.6-13,30.6c11.4,25.8,22.4,51.8,33.6,77.7
c4.4,19.3,8.9,38.5,13.3,57.8c0.1,4.5,55.5,7.8,61.2,12.8c14.4,12.5,28.7,28.6,44.8,38.8c2.4,1.5,17.8-15.3,19.5-16.9
c19.8-19.3,39.5-38.6,59.6-57.6c0,0,0.1-0.1,0.1-0.1c2-1.9,9.3-2.5,11.8-3.2c9.1-4.5,21.8-5.9,31.7-8.5c3.4-0.9,18.2-4.1,19.3-6.6
c0.4-1.1-1.1-4.8-1.3-5.9c-1.7-7.5-3.4-15-5.1-22.5c-4.3-19.3-8.7-38.6-13-57.8c-1.3-5.9-4.3-13.1-4.3-19.1c0-7.3,7.7-17.6,11-23.8
c4.7-9,9.6-18.2,15.1-26.6c-12.8-4.9-25.7-9.7-38.5-14.5c-5.7-2.2-11.5-4.3-17.2-6.5c-1.4-0.5-6.1-1.4-7-2.6
c-5.5-7.4-11-14.7-16.6-22.1c-4.2-5.5-8.3-11.1-12.5-16.6c-2.7-3.6-6.5-11.2-11.1-12.2c-16.3-3.5-32.5-7-48.8-10.6
c0,0-48.3,43.2-48.9,43.7c-1.3,1.2-8.2,0.9-9.9,1.1c-8.1,0-16,1.4-24,2.5c-4.8,0.7-5.3,0.7-8.4,4c-7.2,8-12.9,18.5-19,27.4
C93.3,286.9,89.8,292.4,86.5,298z"/>
<path class="st2" d="M120.1,257.8c-0.7,0.6-1.3,1.4-1.8,2.2c-9.5,13.6-19.1,27.1-28.6,40.7c-5.7,8.1-9.6,17.2-13.7,26.1
c-2.6,5.4-9.2,11.2-9,17.9c0.2,7.5,6.8,17.7,9.7,24.7c8.6,21,19.6,41.3,24.6,63.6c2.1,9.4,3.9,18.9,5.8,28.4
c0.8,4,0.2,13.3,3.6,15.9c1.3,1,3,1.4,4.6,1.7c12.4,2.5,24.9,5.2,37.3,7.8c5.8,1.2,12.5,1.8,18,3.9c4.8,1.8,43.5,36.6,44.4,36.1
c7.7-4.7,13.1-12.7,19.5-18.9c7.6-7.4,15.3-14.8,22.9-22.2c6.8-6.5,13.5-13.1,20.3-19.6c1.9-1.8,5.9-7.5,8.5-8.2
c0,0,60.7-16.3,60.7-16.3c-3-14.1-6.1-28.2-9.1-42.3c-2.4-11.2-4.8-22.5-7.3-33.7c-2-9.2-7-19.4-6.2-28.9c0.5-6.1,5.3-12.4,8.2-17.9
c3.1-5.7,6-11.5,9-17.2c1.1-2.2,4.9-6.7,4.9-9.1c0-2.9,0.4-1.3-1.4-3c-3.7-3.5-13-5.2-17.6-7.1c-5.1,0-13.3-5.3-18.1-7.3
c-4.8-1.9-11.6-3.2-15-7.4c-6.9-8.6-13.8-17.3-20.7-26c-5-6.3-8.4-14.5-14.8-19.6c-4.8-3.8-12-4.2-17.9-5.4
c-7.3-1.6-14.5-3.1-21.8-4.7c-2.8-0.6-6.8-3-9.7-2.5c-5.8,1.1-10.4,8.2-14.5,12c-5.3,4.9-10.8,9.5-16.2,14.3
c-3.7,0-14.6,13.1-17.3,15.6c-0.9,0.8-1.7,1.6-2.8,2.2c-5.7,3-16.7,2.1-23.1,2.7C130.8,256.5,123.7,254.9,120.1,257.8
C120.1,257.8,120.1,257.8,120.1,257.8z"/>
<line class="st3" x1="213.5" y1="212" x2="213.5" y2="372"/>
<line class="st3" x1="214" y1="371.7" x2="102.9" y2="433.9"/>
<line class="st3" x1="214" y1="371.7" x2="339.2" y2="442.8"/>
<rect x="135.9" y="269" class="st4" width="35.9" height="206"/>
<rect x="183" y="269" class="st5" width="35.9" height="206"/>
<rect x="231.1" y="269" class="st6" width="35.9" height="206"/>
<rect x="266.1" y="276" transform="matrix(0.9316 0.3635 -0.3635 0.9316 155.9605 -77.5507)" class="st7" width="35.9" height="199.3"/>
<rect x="135.9" y="279.6" class="st5" width="35.9" height="12.4"/>
<text transform="matrix(0.9373 0 0 1 141.0549 288.2795)" class="st8 st9">Half of my heart</text>
<rect x="183" y="449.7" class="st10" width="35.9" height="12.4"/>
<rect x="183" y="282.1" class="st10" width="35.9" height="12.4"/>
<text transform="matrix(1.146950e-02 -1.1451 0.9999 1.001592e-02 206.0669 400.9011)" class="st8 st11">BIBLE</text>
<rect x="231.1" y="279.6" class="st12" width="35.9" height="12.4"/>
<rect x="294.6" y="295.7" transform="matrix(0.9316 0.3634 -0.3634 0.9316 131.109 -93.0543)" class="st10" width="36.5" height="12.4"/>
<text transform="matrix(-7.525938e-03 1 -1 -7.525938e-03 242.3439 305.506)" class="st13 st14">The childrens book</text>
<rect x="277.6" y="340" transform="matrix(0.9316 0.3634 -0.3634 0.9316 146.0477 -83.8479)" class="st15" width="36.5" height="12.4"/>
<rect x="243.4" y="427.7" transform="matrix(0.9316 0.3634 -0.3634 0.9316 175.5866 -65.399)" class="st16" width="36.5" height="12.4"/>
<g id="hideSides">
<polygon id="left" class="st2" points="214,572 40.8,472 40.8,272 214,372 "/>
<polygon id="top" class="st2" points="214,372 40.8,272 214,172 387.2,272 "/>
<polygon id="right" class="st2" points="387.2,472 214,572 214,372 387.2,272 "/>
</g>
</svg>
非常感谢你