OnMouseOver; how to centre icons in updated code

HTML & CSS
1

What I want to do is every time you put your mouse over the button, I want the White circle border, around the Play or Pause png to change to a different color no matter what state it’s in. Whether on or off.

I don’t know exactly how I would do this, but I was thinking adding a border div tag with a width and height and a different color to it. And then initiate the hover through that.

Will this work?

I’m not positive it will. It’s dramatically different from the other code so I’m confused.

All I’m doing is changing the border color around the play and pause onmouseover, and that’s it.

I’m confused on how to do this on different fronts.

1.) How do I initiate onmouseover on initial.

And then on pause and play classes subsequently.

Template Hover/OnMouseOver code.

Below Code:

On the new border class, I made it transparent so I wouldn’t have to make an additional class, both with play and pause images in them. I don’t know if this was smart, or if it’s not going to work.

New Border Class
https://jsfiddle.net/00much0n/
The hover part, I don’t know if this will work though.


<div class="border" style="display: ; margin: 0 auto;width: 36px;height: 36px;background-color: rgba(0,0,0,.7); background-color: transparent;border-radius: 50%;border: 1px solid red;cursor: pointer;"> </div>

<button id="playButton2" style="width: 79px; height: 79px; cursor: pointer; padding:0;border: 1px solid #0059dd;background-color: black; 
background-image: url('https://i.imgur.com/ltrxz9z.jpg');background-repeat: no-repeat;background-size: cover;" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">

<div  class="initial" style=";display:block; margin: 0 auto; width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

<div class="pause" style="display: none; margin: 0 auto;width: 36px;height: 36px;background-color: rgba(0,0,0,.7); background-image: url('https://i.imgur.com/5nQe2FE.png');background-repeat: no-repeat;background-position: 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

<div class="play" style="display: none; margin: 0 auto;width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

</button>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
2

You can have onmouseover and onmouseout add and remove a class of “hover” to playButton2, with the hover style being listed in a tag.

There’s a problem though. The inline style on the playButton2 prevents any other styles (such as hover) from having any effect on it, so you would have to move the playButton2 style from the inline attribute, to being defined inside of that element.

The style element would then define the style for the normal playButton2, and the additional hover style for it as well.

3

What did I do wrong?

I removed everything from the inline styles like you said.
And I put it all within the button.

It doesn’t look the same as this?

<button id="playButton2" style="width: 79px; height: 79px; cursor: pointer; padding:0;border: 1px solid #0059dd;background-color: black; 
background-image: url('https://i.imgur.com/ltrxz9z.jpg');background-repeat: no-repeat;background-size: cover;" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
playButton2.style.width = '36px'; 
playButton2.style.height = '36px'; 
playButton2.style.margin = '0 auto'; 
playButton2.style.backgroundColor = 'rgba(0,0,0,.7)';
playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/5nQe2FE.png \')';
playButton2.style.backgroundRepeat = 'no-repeat'; 
playButton2.style.backgroundPosition = '50%';
playButton2.style.borderRadius = '50%';
playButton2.style.border='1px solid white';
player.play();
} else {
playButton2.style.width = '36px'; 
playButton2.style.height = '36px'; 
playButton2.style.margin = '0 auto'; 
playButton2.style.backgroundColor = 'rgba(0,0,0,.7)';
playButton2.style.backgroundImage = 'url(\'https://i.imgur.com/jqGA2vF.png \')';
playButton2.style.backgroundRepeat = 'no-repeat'; 
playButton2.style.backgroundPosition = '58% 50%';
playButton2.style.borderRadius = '50%';
playButton2.style.border='1px solid white';
player.pause();
}">

</button>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
4

No, it won’t work like that.

Before the play button, add a style tag.

<style>
</style>

Then move the playButton2 styles in to the style tag.

<style>
#playButton2 {
    width: 79px; height: 79px; cursor: pointer; padding:0; border: 1px solid #0059dd;
    background-color: black; background-image: url('https://i.imgur.com/ltrxz9z.jpg');
    background-repeat: no-repeat; background-size: cover;
}
</style>

Making sure to remove the styles from the button itself.

<button id="playButton2" style="" onclick="..." ...>

You can even completely remove that style attribute.

The hover CSS for playButton2 can now be put in the style tag. Usually the hover stuff is placed afterwards.

#playButton2 {
    ...
}
#playButton2:hover {
    ...
}
1 Like
5

This is what I have then.

<style>
#playButton2 {
    width: 79px; height: 79px; cursor: pointer; padding:0; border: 1px solid #0059dd;
    background-color: black; background-image: url('https://i.imgur.com/ltrxz9z.jpg');
    background-repeat: no-repeat; background-size: cover;
}

#playButton2:hover {
  margin: 0 auto;width: 36px;height: 36px;background-color: rgba(0,0,0,.7); background-color: transparent;border-radius: 50%;border: 1px solid red;cursor: pointer;
}
</style>

<button id="playButton2" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">



</button>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
6

Then I add this?

#initial {
  display:block; margin: 0 auto; width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;
}
7

Or did you mean this?

<style>
#playButton2 {
    width: 79px; height: 79px; cursor: pointer; padding:0; border: 1px solid #0059dd;
    background-color: black; background-image: url('https://i.imgur.com/ltrxz9z.jpg');
    background-repeat: no-repeat; background-size: cover;
}
#playButton2:hover {
  margin: 0 auto;background-color: rgba(0,0,0,.7); background-color: transparent;border: 1px solid red;cursor: pointer;
}

</style>


<button id="playButton2"  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">

<div  class="initial" style=";display:block; margin: 0 auto; width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

<div class="pause" style="display: none; margin: 0 auto;width: 36px;height: 36px;background-color: rgba(0,0,0,.7); background-image: url('https://i.imgur.com/5nQe2FE.png');background-repeat: no-repeat;background-position: 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

<div class="play" style="display: none; margin: 0 auto;width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

</button>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
8

It looks like the hover works well there.

9

It’s supposed to be on the circle around the play png. Not the square box.

10

Oh right. The circle is on the play button called .initial, so you can move the initial styles up to the style section, and use button div:hover for the hover stuff instead.

11

It’s not working.

12

It works for me.

Please show what you are doing., and we’ll help you to understand how you can improve on what you’re doing wrong.

2 Likes
13 
<style>
#playButton2 {
    width: 79px; height: 79px; cursor: pointer; padding:0; border: 1px solid #0059dd;
    background-color: black; background-image: url('https://i.imgur.com/ltrxz9z.jpg');
    background-repeat: no-repeat; background-size: cover;
}
div:hover {
 display:block; margin: 0 auto; width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid red;cursor: pointer;
}

</style>


<button id="playButton2"  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">

<div  class="initial" style=";display:block; margin: 0 auto; width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

<div class="pause" style="display: none; margin: 0 auto;width: 36px;height: 36px;background-color: rgba(0,0,0,.7); background-image: url('https://i.imgur.com/5nQe2FE.png');background-repeat: no-repeat;background-position: 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

<div class="play" style="display: none; margin: 0 auto;width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

</button>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
14

The div with a class of “initial” still has inline styles on it, so those won’t be changed by any hover state. Move those styles up to the <style> element as a style declaration for .initial

1 Like
15 
<style>
#playButton2 {
    width: 79px; height: 79px; cursor: pointer; padding:0; border: 1px solid #0059dd;
    background-color: black; background-image: url('https://i.imgur.com/ltrxz9z.jpg');
    background-repeat: no-repeat; background-size: cover;
}
div:hover {
 display:block; margin: 0 auto; width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid red;cursor: pointer;
}

.initial {
display:block; margin: 0 auto; width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;
}


</style>


<button id="playButton2"  onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
  document.querySelector('#playButton2 .initial').style.display='none';
  document.querySelector('#playButton2 .pause').style.display='none';
  document.querySelector('#playButton2 .play').style.display='none';
player.volume=1.0; if (player.paused) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">



<div class="pause" style="display: none; margin: 0 auto;width: 36px;height: 36px;background-color: rgba(0,0,0,.7); background-image: url('https://i.imgur.com/5nQe2FE.png');background-repeat: no-repeat;background-position: 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

<div class="play" style="display: none; margin: 0 auto;width: 36px;height: 36px; background-color: rgba(0,0,0,.7);background-image: url('https://i.imgur.com/jqGA2vF.png');background-repeat: no-repeat;background-position: 58% 50%;border-radius: 50%;border: 1px solid white;cursor: pointer;"> </div>

</button>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
16

Removing the <div class="initial"> element means that the intiial play button can’t be shown.
I’m sure that you noticed this issue.

17

Yes, so now what? Just leave it in there like that?

18

Put the initial div back, without the inline style.

1 Like
19

Did that.

20

You have left the div unclosed. Do you have some reason for that?