How to remove hover on button with click?

Question

I'm building a character creator using just HTML, CSS and Vanilla JS. I have 3 options for each page that all are buttons and their initial opacity is set to 0.5 but when you hover on the button it will increase the opacity to 1. The intended outcome would be that the user would hover over the selections to increase the opacity and when they click on their choice, it will keep that opacity as they have made their selection.

Any ideas here on where I went wrong and what else could possibly work? I've searched everywhere but I am not sure if this is possible in Vanilla JS with the code I have.

rogueButton.addEventListener('click', () => {
  rogueButton.classList.remove('hoverEffect')
  rogueButton.classList.add('classSelected')
  characterSelections[0] = 'Rogue';
  characterSelections[8] = 'Dexterity';
  document.getElementById("primaryAbilityCS").innerHTML = characterSelections[8];
  raceContinue.classList.add('continueButtonSelected');
})

.hoverEffect:hover {
  opacity: 1;
}

.characterChoices {
  opacity: 50%;
  transition: 0.3s;
}

.characterSelected {
  opacity: 1;
}

<div class="characterChoices hoverEffect" id="rogue">
  <button class="flex optionBackground classChoice" id="rogueButton" type="button">
  <div class="classselection">
    <div class="sectioninfowrapper">
      <h3>ROGUE</h3>
       <img src="img/infoicon1.png" class="infoiconwrapper2" id="roguePopup">
       <span class="hidden popupStyling" id="rogueInfoPopup">Rogues are real sneaky.</span>
     </div>
     <img src="img/banner.png" width="100%">
   <div class="sectioninfowrapper">
     <p>Primary Ability</p>
     <img src="img/infoicon1.png" class="infoiconwrapper1" id="roguePrimaryAbilityPopup">
     <span class="hidden popupStyling" id="roguePrimaryAbilityInfoPopup">You're naturally light on your feet.</span>
    </div>
    <p class="classinfo">Dexterity</p>
 </div>
   <img src="img/rogue.png" alt="rogue">
</button>
</div>

do you mean hover on a button will execute click function ? https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouseover — Mystogan, Apr 01 '21 at 18:17
It's similar to that but instead of increasing the size of the image it will increase the opacity. My issue is when I click on my button and move my cursor away from my choice, the opacity returns to 0.5 — Becca, Apr 01 '21 at 19:21
You obviously need to remove `characterChoices` class, not `hoverEffect`. — connexo, Apr 02 '21 at 03:05
thank you @connexo I will give that a try to see if that works but I think I have before with no luck. Any tips on how to edit my original post? I wanted to add my HTML to see if that can help everyone visualize what I am trying to achieve here. — Becca, Apr 02 '21 at 10:16

score 0 · Answer 1 · answered Apr 01 '21 at 18:20

0

You added classSelected instead of characterSelected class.

answered Apr 01 '21 at 18:20

Георги Кръстев

328
1
9

I just tried that changing the class name and unfortunately it did not work. Thank you though! – Becca Apr 01 '21 at 19:19

Mystogan · Answer 2 · 2021-04-02T03:07:54.520

0

Hope this will answer your questions

Remove hover function already answered here:

Can I disable a CSS :hover effect via JavaScript?

else:

function bigImg(x) {
  x.style.height = "64px";
  x.style.width = "64px";
  x.style.opacity = parseFloat(x.style.opacity) + 0.5;
}

function bigImg2(x) {
  x.style.height = "64px";
  x.style.width = "64px";
  x.style.opacity = parseFloat(x.style.opacity) + 0.1;
}

function normalImg(x) {
  x.style.height = "32px";
  x.style.width = "32px";
}

<!DOCTYPE html>
<html>
<body>

<img onmouseover="bigImg(this)" onmouseout="bigImg(this)" border="0" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="32" height="32" style="opacity: 0.5">

<img onmouseover="bigImg2(this)" onmouseout="bigImg2(this)" border="0" src="https://www.w3schools.com/jsref/smiley.gif" alt="Smiley" width="32" height="32" style="opacity: 0.5">

</body>
</html>

edited Apr 02 '21 at 03:07

answered Apr 02 '21 at 02:49

Mystogan

114
2
13

I can't find this answer is relevant for the question. – Nimna Perera Apr 02 '21 at 02:56
@NimnaPerera can you read the comments first ? she said "t's similar to that but instead of increasing the size of the image it will increase the opacity. My issue is when I click on my button and move my cursor away from my choice, the opacity returns to 0.5 – Becca" – Mystogan Apr 02 '21 at 02:56
As @Becca said it should reflect the hover effect, But in your answer it will happen only in the first time. That should be changed accordingly. – Nimna Perera Apr 02 '21 at 02:58

Nimna Perera · Answer 3 · 2021-04-04T04:10:41.560

As @Георги Кръстев said the issue is that you added classSelected instead of characterSelected class. Plese refer the following code.

const rogueButtons = document.getElementsByClassName('characterChoices');

for (let i=0; i< rogueButtons.length; i++) {
  rogueButtons[i].addEventListener('click', () => {
    //remove the exisisting selection first
    for (let j=0; j < rogueButtons.length; j++) {
        if (rogueButtons[j].classList.contains('characterSelected')) {
            rogueButtons[j].classList.remove('characterSelected');
        }
    }
    
    rogueButtons[i].classList.remove('hoverEffect')
    rogueButtons[i].classList.add('characterSelected')

    // If you want to add functionality to unselected button after a click again,
    // use toggle instead of remove and add functions as mentioned below

    // rogueButtons[i].classList.toggle('hoverEffect')
    // rogueButtons[i].classList.toggle('characterSelected')

    // I don't know what will happen with your below code. So, for now I commented
    // all. Above two lines are enough for your problem.

    // characterSelections[0] = 'Rogue';
    // characterSelections[8] = 'Dexterity';
    // document.getElementById("primaryAbilityCS").innerHTML = characterSelections[8];
    // raceContinue.classList.add('continueButtonSelected');
  });
}

.inline {
  display: inline;
  float: left;
}

.charBtn {
  border: none;
  background: #468ecc;
  padding: 10px;
}
  
.characterChoices{
  opacity: 50%;
  transition: 0.3s;
  }

.characterSelected,
.hoverEffect:hover {
    opacity: 1;
  }

<html>
<head>
<title>Button hover & selected effect</title>
</head>
<body>
<div class="inline">
  <button class="charBtn characterChoices hoverEffect">charcter1</button>
  <button class="charBtn characterChoices hoverEffect">charcter2</button>
  <button class="charBtn characterChoices hoverEffect">charcter3</button>
  <button class="charBtn characterChoices hoverEffect">charcter4</button>
  <button class="charBtn characterChoices hoverEffect">charcter5</button>
</div>
</body>
</html>

This is really close!! How would you have this happen as well as only select one button at a time? I only want one choice to be "highlighted" when they click their option. — Becca, Apr 02 '21 at 10:17
So you mean when user select another choice the previous choice should be deselected. is that right? — Nimna Perera, Apr 02 '21 at 13:26
Yes that is right, only one of the three choices should be selected at a time. — Becca, Apr 03 '21 at 16:23
I think now, this answer is solving your problem. check the `for` loop inside the event listener that I've added to remove existing selection first. — Nimna Perera, Apr 04 '21 at 04:11

How to remove hover on button with click?

3 Answers3