1
0
mirror of https://github.com/exane/not-gwent-online synced 2024-11-23 19:36:53 +00:00

change music hover

This commit is contained in:
devfake 2015-07-05 21:06:32 +02:00
parent 868d930d01
commit 91f8d3ba4e
3 changed files with 15 additions and 10 deletions

View File

@ -1,5 +1,5 @@
// Start music. // Start music.
$(".video-self").tubeplayer({ $(".video-self2").tubeplayer({
width: 0.001, width: 0.001,
height: 0.001, height: 0.001,
initialVideo: "UE9fPWy1_o4", initialVideo: "UE9fPWy1_o4",
@ -33,6 +33,17 @@ $('.volume').on('blur', function() {
localStorage.setItem('volumeValue', val); localStorage.setItem('volumeValue', val);
}); });
// Show music options.
var musicHover;
$('.music-icon, .music-options').hover(function() {
clearTimeout(musicHover);
$('.music-options').fadeIn();
}, function() {
musicHover = setTimeout(function() {
$('.music-options').fadeOut();
}, 500);
});
// Music options. // Music options.
$('.music-icon').on('click', function() { $('.music-icon').on('click', function() {
if($(this).hasClass('active')) { if($(this).hasClass('active')) {

View File

@ -17,7 +17,7 @@
<span class="video-self"></span> <span class="video-self"></span>
<i class="music-icon active" title="Click to mute/unmute music"></i> <i class="music-icon active" title="Click to mute/unmute music"></i>
<div class="music-options"> <div class="music-options">
<label for="volume">Volume</label> <label for="volume">Volume:</label>
<input type="text" class="volume" id="volume"> <input type="text" class="volume" id="volume">
<label for="volume">%</label> <label for="volume">%</label>
</div> </div>

View File

@ -111,11 +111,6 @@ body {
transition: all .2s ease-in-out 0s; transition: all .2s ease-in-out 0s;
z-index: 20; z-index: 20;
padding: 30px; padding: 30px;
&:hover .music-options {
opacity: 1;
visibility: visible;
}
} }
.music-icon { .music-icon {
@ -143,9 +138,8 @@ body {
color: #8798ac; color: #8798ac;
clear: both; clear: both;
margin: 15px 0 0 0; margin: 15px 0 0 0;
opacity: 0; width: 180px;
visibility: hidden; display: none;
width: 170px;
label { label {
float: left; float: left;