Solved

How to press and button and change another class

Posted on 2016-08-26
2
46 Views
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>
            <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
Comment
Question by:mingchih
2 Comments
 
LVL 42

Accepted Solution

by:
zephyr_hex (Megan) earned 500 total points
ID: 41772474
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
 

Author Closing Comment

by:mingchih
ID: 41772493
thanks!!
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
ASP:Radiobuttonlist/asp:RadioButtonListItem custom styling 1 40
How to make a moving character 3 55
HTML5 frame 5 25
Decoding Special HTML Characters using Javascript? 2 23
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

786 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