Question

如何让svg图像在悬停时略微改变颜色，当点击切换切换到另一个svg图像时，可以通过再次单击切换回原始图像（相同的悬停效果）。单击时，它应播放/暂停源音频文件。

body {
  background: black;
}

<script async src="//jsfiddle.net/jbwhr7n9/1/embed/js,html,css,result/dark/"></script>

这就是我到目前为止所做的，我一直在研究如何做到这一点，并且找不到这个用例的明确答案。

Answer 1

我添加了jQuery来播放和暂停音频，隐藏并显示按钮。

$('#play').click(function() {
  $('#audio-file').trigger('play');
  $(this).hide();
  $('#pause').show();
});

$('#pause').click(function() {
  $('#audio-file').trigger('pause');
  $(this).hide();
  $('#play').show();
});

body {
  background: #242626
}
.blockA {
     border: 6px solid #181919;
     background: #181919;
}
.blockB {
     border: 6px solid #2c3030;
     background: #2c3030;
     display: inline-block;
     margin: 8px 8px 8px 8px;
}
.blockC {
     border: 6px solid #242626;
     background: #242626;
}
.titleHover {
     border: 4px solid transparent;
     width: 200px;
     height: 301px;
     display: block;
}
.titleHover > img {
     max-width: 100%;
     height: 100%;
}
.titleHover:hover {
     border-color: #49bdba;
}
a:link {
     color: #49bdba;
     background: transparent;
}
a:visited {
     color: #49bdba;
}
a:hover {
     color: #49bdba;
     background: transparent;
}
a:active {
}
.sBC {
display: inline-block;
cursor: pointer;
}

.sBB1, .sBB2, .sBB3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}

/* Rotate first bar */
.change .sBB1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .sBB2 {
opacity: 0;
}

/* Rotate last bar */
.change .sBB3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px) ;
transform: rotate(45deg) translate(-8px, -8px) ;
}
ul {
background-color: #181919;
list-style-type: none;
margin: 0;
padding: 1;
}
.btn-secondary {
color: #fff;
background-color: #242626;
border-color: #242626;
}
.btn-secondary:focus {
box-shadow: 0 0 0 3px rgba(0,0,0,0);
}
.blockD {
display: inline-block;
}

.bottom-bar {
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    text-align: center;
}
.mbuttonhover {
  fill: #49bdba;
  cursor: pointer;
}
.mbuttonhover:hover {
  fill: rgb(36,100,98);
}

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<audio src="https://d3cj65qhk7sagp.cloudfront.net/tracks/Beacon/Faux+Tales+-+Beacon.mp3" id="audio-file"></audio>
<div class="blockA">
  <div>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 150 150" width="10%" height="10%" class="mbuttonhover active" id="play"><defs><clipPath id="_clipPath_yKzkJPlSAzMkZT8ai7ySqD3TM8Th7XOR"><rect width="100%" height="100%"/></clipPath></defs><g clip-path="url(#_clipPath_yKzkJPlSAzMkZT8ai7ySqD3TM8Th7XOR)"><path class="expand" d=" M 130.884 81.689 L 78.986 111.95 L 27.087 142.212 C 19.761 146.484 13.804 143.067 13.794 134.586 L 13.722 75.049 L 13.65 15.513 C 13.64 7.032 19.626 3.535 27.008 7.709 L 78.895 37.047 L 130.783 66.386 C 138.165 70.56 138.211 77.417 130.884 81.689 Z "/></g></svg>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate; display: none;" viewBox="0 0 150 150" width="10%" height="10%" class="mbuttonhover" id="pause"><defs><clipPath id="_clipPath_r5GZgsezpi491ktbWcAvoJzmMQuyG3g9"><rect width="150" height="150"/></clipPath></defs><g clip-path="url(#_clipPath_r5GZgsezpi491ktbWcAvoJzmMQuyG3g9)"><path d=" M 20.76 15 L 57.24 15 C 60.419 15 63 17.581 63 20.76 L 63 129.24 C 63 132.419 60.419 135 57.24 135 L 20.76 135 C 17.581 135 15 132.419 15 129.24 L 15 20.76 C 15 17.581 17.581 15 20.76 15 Z  M 92.76 15 L 129.24 15 C 132.419 15 135 17.581 135 20.76 L 135 129.24 C 135 132.419 132.419 135 129.24 135 L 92.76 135 C 89.581 135 87 132.419 87 129.24 L 87 20.76 C 87 17.581 89.581 15 92.76 15 Z "/></g></svg>
  </div>
</div>
</body>

音频播放暂停切换按钮

1 个答案: