• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 68
  • Last Modified:

How to press and button and change another class

Hi, experts

I would like to learn how to change the background color of another class ( .fullscreen-bg ) when hover on a button ( .btn ).

            <div class="hero-text-box">
                <a class="btn" href="#"><img src="img/image.png" alt="cta" class="cta"></a>
            </div>
            <div class="fullscreen-bg">
             <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
                    <source src="video/042016.mp4" type="video/mp4">
                </video>
            </div>

Open in new window


.btn:hover,
.btn:active {
    background-color: #cf6d17;
}

Open in new window


.fullscreen-bg {
  opacity: 0.4;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  z-index: -100;
}

Open in new window

0
Brian Lin
Asked:
Brian Lin
1 Solution
 
zephyr_hex (Megan)DeveloperCommented:
You can do this with jQuery.  Here is a Fiddle Demo.

HTML
<input type="button" class="btn" value="Hover Me">
<div class="fullscreen-bg">
  Hello World
</div>

Open in new window


jQuery
$('.btn').hover(
  function() {
    $('.fullscreen-bg').css({
      "background-color": "red"
    });
  },

  function() {
    $('.fullscreen-bg').css({
      "background-color": "transparent"
    });
  }
);

Open in new window

0
 
Brian LinDesignerAuthor Commented:
thanks!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now