-2

I'm trying to apply a hover effect to all button tags that have the class dialog-btn. I've tried .dialog-btn:hover{background-color:gold} but that doesn't work. I've also tried other suggestions to similar questions but still no luck. Can someone please clarify how I can do this?

Neither of the two examples below works.

button.dialog-btn:hover {
  background-color: gold;
}
<div class="dialog-btns">
  <button class="dialog-btn" id="yes">Ref Match</button>
  <button class="dialog-btn" id="about">About</button>
</div>

.dialog-btn:hover {
  background-color: gold;
}
<div class="dialog-btns">
  <button class="dialog-btn" id="yes">Ref Match</button>
  <button class="dialog-btn" id="about">About</button>
</div>

EDIT 2:

 #yes{
    background-color:green;
 }
 #about{
    background-color:purple;
 }

The code above appears to overwrite the .dialog-btn:hover code above. Why is that?

ribarcheto94
  • 436
  • 11
  • 25
  • 1
    You need to provide a [mcve], not a tiny fragment of CSS with no HTML. – Quentin May 29 '17 at 19:07
  • Your code .. ....' – RïshïKêsh Kümar May 29 '17 at 19:08
  • _"Can someone please clarify how I can do this?"_ - using CSS alone: Not at all. (_Maybe_ if all buttons had a common parent, then hovering the parent could color the child buttons - but that is probably not gonna work out in most layout situations.) This will need some JavaScript. – CBroe May 29 '17 at 19:08
  • 1
    https://stackoverflow.com/questions/1935820/set-ahover-based-on-class – Nimish May 29 '17 at 19:09
  • I'm not even sure what the question is asking. There are two obvious ways it could be interpreted: "When a button is hovered, that button takes on a different background colour" or "When a button is hovered, ALL buttons take on a different background colour". – Quentin May 29 '17 at 19:11
  • @Nimish, I tried the suggested answer to the question you linked before asking this one, but it didn't work for me. – ribarcheto94 May 29 '17 at 19:15
  • @Quentin, it's the first. I basically want every button that has the dialog-btn class to turn gold when hovered over. – ribarcheto94 May 29 '17 at 19:16
  • 1
    Post your code then] – Nimish May 29 '17 at 19:16
  • Code is Posted! – ribarcheto94 May 29 '17 at 19:20
  • @ribarcheto94 — Both versions of your code work when I test it. Did you verify your [mcve]? Does the problem only occur with a specific browser / operating system combination? – Quentin May 29 '17 at 19:23
  • your code works fine, something else may be overwriting your style –  May 29 '17 at 19:26
  • Fawad, you are right! I have CSS specific for each of the ids `yes` and `about` but I don't understand why that overwrites the class :hover styling – ribarcheto94 May 29 '17 at 19:31
  • Include a [mcve] please. It's probably just CSS specificity at play. – TylerH May 29 '17 at 19:40
  • Duplicate of: https://stackoverflow.com/questions/4072365/css-understanding-the-selectors-priority-specificity – Quentin May 30 '17 at 08:15

1 Answers1

0

Reading your comments, i guess you want to have gold color on all of your buttons if you hover over parrent element.

If it is the case, you can do that 

.dialog-btns:hover .dialog-btn{
background-color: gold;
}