Is it possible to create an SVG image that changes color slightly when hovered over, and when clicked toggles to another SVG image that can be switched back to the original by clicking again with the same hover effect? Additionally, when clicked, it should play/pause a source audio file.
body {
background: black;
}<script async src="//jsfiddle.net/jbwhr7n9/1/embed/js,html,css,result/dark/"></script>I utilized jQuery to control the playback and pause functionality of an audio file, toggling the visibility of different buttons accordingly.
$('#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>Is there a way to position the menu point at the bottom of the screen? It would be great if we could easily customize the style of the navigation options for each element. Check out my App Navigator below: const AppNavigator = createDrawerNavigator( ...
I am currently working on a form in Apex 4.1 where I have an address lookup field that utilizes JavaScript to connect to an address database and populate separate fields with the address details (address1, address2, town, postcode). On the same page, I ha ...
While transitioning, I need the ability to modify parameter values. After researching the documentation, I discovered a method called `params('to')` that allows accessing target state's parameters. This is how it looks in my code: $transiti ...
Currently enrolled in a ReactNative course on Coursera, I am facing an error in a 4-year-old course: "Touchable child must either be native or forward setNativeProps to a native component." I am unsure about this error and would greatly appreciate any hel ...
Scenario: Developing a Vue3 app with express as the API backend. Express utilizes express-sessions to create a server-side session that is transmitted to the browser and received in subsequent requests. I am in the process of implementing a route guard to ...
I have attempted multiple methods to add an icon in the displayfield when a combo box item is selected without success. Here is the fiddle link for anyone who would like to help me with this issue. Your assistance is greatly appreciated. View the example ...
I am currently using .Net Core Razor for my application and encountering an issue with passing values to the controller when calling the action from Ajax. Below is the script I am using: var table = $('#dataTable').DataTable(); var data = table. ...
I have created a simple function, but it is not animating smoothly and seems to lag... I am using it for a div sized at 1600x700 pixels on page load $(document).ready(function(){ $('#slider').slideDown(500); }); Is there any way to ensure s ...
I am facing an issue with my AJAX request where I am trying to return a simple echo, but for some reason, it's not working this time. Even after stripping down the code to its bare essentials, the response is still blank. Javascript function getUs ...
It's strange how the code below works perfectly without any errors and records a response once the loginHandler() function is triggered. However, when I include the dispatch function inside the try block after receiving the response, the catch block e ...
Is there a way to make my webpage fixed-width instead of liquid? I've tried changing the container size to pixels but the text still collapses when I resize the browser. Any suggestions on how to keep it at a fixed width? <!DOCTYPE html PUBLIC "-/ ...
I am currently attempting to customize the background color and text color for specific HTML components. Within my project, there are 3 navigation bars. I aim to establish a default color for all nav bars while also altering the specific color of one of t ...
I am currently facing an issue with setting up an image map with ajax hover functionality to retrieve information from the database table major_occurrence. Unfortunately, the ajax call does not seem to be working at all. The hover element is clickable and ...
Within my current asp.net-mvc project, there is a specific page where users can make selections from a dropdown box that triggers a post request to update multiple values. To prevent any confusion caused by delays in the postback process leading to uninten ...
Check out this jsfiddle link: http://jsfiddle.net/uTy5j/7/embedded/result/ I've encountered an issue with CodeMirror where it seems to erase the style tag I create using the following code: var preview = document.getElementById('preview') ...
Which generator or scaffold is recommended for creating a contemporary front-end web module using npm/webpack? ...
I tried running the command npm i --save-dev puppeteer to set up puppeteer for e2e testing. Unfortunately, an error occurred during installation: C:\Users\Mora\Desktop\JS\Testing>npm i --save-dev puppeteer > <a href="/cd ...
I am currently using the vue-datepicker component to display a date input field in my form. I want to set the default date to the current day and disable the selection of past dates. Additionally, I need to change the language of the component but it seems ...
When using the scrollBy() method in the window object of JavaScript, there are two arguments required. But what do these arguments actually represent? The resource I am currently studying from states that it is "the number of pixels to scroll by," but I am ...
Seeking assistance in transitioning from Jade to Bliss as the template engine for a basic Express web application on NodeJS. Here is the code snippet from app.js: var express = require('express'), routes = require('./routes'), ...