How to press and button and change another class

Posted on 2016-08-26
Medium Priority
Last Modified: 2016-08-26
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 class="fullscreen-bg">
             <video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
                    <source src="video/042016.mp4" type="video/mp4">

Open in new window

.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

Question by:Brian Lin
LVL 44

Accepted Solution

zephyr_hex (Megan) earned 2000 total points
ID: 41772474
You can do this with jQuery.  Here is a Fiddle Demo.

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

Open in new window

  function() {
      "background-color": "red"

  function() {
      "background-color": "transparent"

Open in new window


Author Closing Comment

by:Brian Lin
ID: 41772493

Featured Post

7 new features that'll make your work life better

It’s our mission to create a product that solves the huge challenges you face at work every day. In case you missed it, here are 7 delightful things we've added recently to monday to make it even more awesome.

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

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
Find out what you should include to make the best professional email signature for your organization.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question