Hover over page to change color of page |
Hover over page to change color of page |
bootsy |
Jan 29 2020, 10:57 AM
Post
#1
|
Group: Members Posts: 1 Joined: 29-January 20 Member No.: 27,141 |
Hello,
I am new here and not sure where the right place is to post this. I currently have a home page view where there is an image and a link menu list across the top of the page. When I hover over the image it changes from a white background, black letters to black background and white letters. This is set up in the code below: CODE @{ ViewData["Title"] = "Home Page"; } <script> function whiteImg() { document.getElementById("myImg").src = "/images/DailyProcessWhite.png"; document.style.height = "800px"; document.style.width = "800px"; } function blackImg(){ document.getElementById("myImg").src = "/images/DailyProcessBlack.png"; document.style.height = "800px"; document.style.width = "800px"; } </script> <div class="container"> <img onmouseover="blackImg(this)" onmouseout="whiteImg(this)" id="myImg" src="@Url.Content("/images/DailyProcessWhite.png")" width="800" height="800"> </div> You can see i have a js function that switches two images onmouseover. What I want to do is have the entire page change from a white background, black letters to black background and white letters on hover over and not just the image. My menu is in a separate _Layout page. How do I incorporate the menu and entire page to do the hover over like I described. Here is the layout page code CODE <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - DP</title> @*<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />*@ <link rel="stylesheet" href="~/css/site.css" /> </head> <body> <header> <nav id="myMenu" class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <div class="container"> <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">DP</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse"> <ul class="navbar-nav flex-grow-1"> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">HOME</a> </li> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">MEN</a> </li> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">WOMEN</a> </li> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">KIDS</a> </li> <li class="nav-item"> <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">ABOUT</a> </li> </ul> </div> </div> </nav> </header> <div class="container"> <main role="main" class="pb-3"> @RenderBody() </main> </div> <footer class="border-top footer text-muted"> <div class="container"> © 2020 - DP - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> </div> </footer> <script src="~/lib/jquery/dist/jquery.min.js"></script> <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="~/js/site.js" asp-append-version="true"></script> @RenderSection("Scripts", required: false) </body> </html> The page when I hover over the image changes to black background, white letters but the rest of the page stays white background, black letters. I don't know how to post a screenshot to the post. So I hope what I am describing makes sense. |
pandy |
Jan 29 2020, 03:02 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Maybe this snip of CSS is a start?
CODE body { color: black; background: white } body:hover { color: white; background: black } |
Lo-Fi Version | Time is now: 24th April 2024 - 06:14 AM |