如何使用光標在上懸停時,如何製作一個標籤,其名稱爲,從導航欄中的SVG「展開」。爲了使事情變得更加清晰: here's a sketch of the wanted effect如何製作懸停時展開的標籤?
/*this class is inside the <polyline> tag*/
.hover {
opacity: 0.5 !important;
}
.hover:hover {
opacity: 1 !important;
}
svg {
width: 50%;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="jquery.scrollTo.js" type="text/javascript"></script>
<script src="jquery.localScroll-1.4.0/jquery.localScroll.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="container">
<div id="firstPage">
<div id="navbar">
<!--these are the SVGs wrapped into an <a> tag-->
<a href="#firstPage" id="a">
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Livello_1" x="0px" y="0px" viewBox="0 0 118.7 103.3" xml:space="preserve" enable-background="new 0 0 118.7 103.3">
<style type="text/css">
.st0 {
fill: #FF3333;
}
</style>
<polyline class="st0 hover" points="59.3 34.4 59.5 34.4 0.3 0 0.3 68.4 0.2 68.4 59.4 103.4 59.4 103.4 118.5 68.4 118.3 68.4 118.3 0 59.2 34.4 " />
</svg>
</a>
</div>
</div>
</div>
任何幫助將是巨大的!
問題中無代碼即將關閉。請添加一些代碼。 –