For my website, I want to achieve the same effect as seen on the homepage of this site:
I am looking to change the background image of my webpage when a specific li element is hovered over. Each li element should trigger a different background image.
Additionally, if anyone can assist with styling the text elements similar to the example site, it would be greatly appreciated.
body {
background-size: cover;
}<script>
function changeBackground() {
document.body.style.backgroundImage = "url('https://upload.wikimedia.org/wikipedia/commons/thumb/f/fd/Color_icon_red.svg/2000px-Color_icon_red.svg.png')";
}
</script>
<a href="link-to-your-desired-destination" onmouseover="changeBackground()">Hello!</a>Showcased above is a demonstration of utilizing CSS to style the background as requested.
Check out this interactive demo
HTML
<div class="background-divs green active"></div>
<div class="background-divs blue"></div>
<div class="background-divs yellow"></div>
<ul class="links">
<li><a class="link" data-background="green" href="">green</a></li>
<li><a class="link" data-background="blue" href="">blue</a></li>
<li><a class="link" data-background="yellow" href="">yellow</a></li>
</ul>
CSS
.background-divs {
width: 100vw;
height: 100vh;
position: absolute;
opacity: 0;
top: 0;
left: 0;
right: 0;
left: 0;
visibility: visible;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.background-divs.blue {
background-color: blue;
}
.background-divs.green {
background-color: green;
}
.background-divs.yellow {
background-color: yellow;
}
.links {
position: absolute;
top: 0;
left:0;
z-index: 5;
}
.links li {
border: 1px solid white;
color: white;
margin: 30px 0;
padding: 10px;
}
.active {
opacity: 1;
visibility: visible;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
JS
$('.link').mouseover(function(e) {
e.preventDefault();
var color = $(this).attr('data-background');
$('.background-divs').removeClass('active');
$('.background-divs.'+color).addClass('active');
});
While attempting to make a post request from the site to the server with user input data, I encountered an error message saying TypeError: Cannot read property 'vehicle' of undefined as the response. Here is the HTML and script data: <!DOCTY ...
Hey there! I'm new to the world of web development and currently working on creating a simple todo list application. Recently, I revamped my webpage design by incorporating Bootstrap, and the results were pretty exciting! Original Code without Bootst ...
When loading my jsp pages through an Ajax call, I want a function to be called every time the page loads successfully. Consider the structure below: |Main.jsp--------------------------------------| | Link A Link B Link C | | ...
I need assistance with creating a JavaScript regular expression that matches the format "APL-101". 1) The letters before '-' must be in capital letters, without any special characters, and can be any length. 2) After '-', the string s ...
I'm currently working on a for loop within an object array. Below is the code snippet I am working with: private async rightsOverview() { let item: any[] = []; const prod = await fetchFromApi<ProductionBaseType>(`/productions/${id ...
Below is a code snippet that allows the price in the 'price' div to change based on user selection. <script type="text/javascript"> function showprice(e){ document.getElementById("price").innerHTML = e.getAttribute(&apo ...
I am facing a challenge with stacking twelve arguments in no particular order on a drag and drop element. The texts overlap each other, making it difficult for the end user to see them clearly when dragging and dropping. Is there a way to stack texts using ...
For the past two years, my Google Apps Script connected to a spreadsheet has been working flawlessly. I created an HTML form to upload CSV and Excel files for processing and data loading into the spreadsheet. However, since March 2020, file uploading has b ...
Having an issue with displaying two tables next to each other inside a div. Despite my efforts to adjust the CSS, they are stacking on top of each other instead of side by side. Here is the code: #contactdetails_table{ width: 500px; height: 190px; ...
Is there a way to utilize puppeteer and a for loop to extract all links present in the source code of a website, including javascript file links? I am looking for a solution that goes beyond extracting links within html tags. This is what I have in mind: a ...
Here is the example of HTML code: <input type="button" id="abc" name="TechSupport_PartsOrder" value="Open Editor" /> This is the jQuery Code: $('#abc').click(function () { alert('x'); }); But when I move this jQuery code to a ...
After spending 2 hours searching for the source of my error, I have decided to seek help here. The error message I am encountering is: "angular2-cookies/core.js not found" I have already installed angular2-cookie correctly using npm. Below is the code ...
My user page is the only one being accessed for both users and admins. Within my database and table, each are divided by 'type', where 0 represents a user and 1 represents an admin. Here is my code: <?php session_start(); include 'dbcon. ...
Currently, I am in the process of learning asp.net and trying to access server data to populate a textbox with the retrieved information. public partial class WebForm1 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) ...
I'm struggling to position a TextField/Autocomplete with a loader/linear progress at the bottom without it pushing the TextField/Autocomplete upwards. Can anyone suggest a proper solution for this issue? For reference, you can check out the Codesandb ...
Currently, I am working on an Angular project and my requirement is to hide the header block specifically on the login page. Despite attempting to hide the header on the login page, it seems that my efforts have been unsuccessful so far. Is there anyone wh ...
Is there an intrinsic digest/apply included when the promise chain is resolved/rejected in $q? I recently switched from using $q to q in my code and it seems like a digest is no longer happening, leading to different outcomes. What could be causing this c ...
Having some trouble with the autocompletion feature of md-contact-chips. I want to capture the $query as soon as someone starts typing. HTML <md-contact-chips ng-model="members" md-contacts="querySearch($query)" md-contact-name="fullname" ...
Is there a way to extract each value from the HTML within the li class separately? I have tried various methods but none have been successful. Can anyone provide a solution? Here is my JavaScript code: $(document).ready(function() { $(".list-grou ...
Is it possible to prevent the propagation of a click event on a dynamically created div within its parent div? HTML <div id = "parent"> Some Stuff </div> Jquery $('#parent').click(function(){ $(this).append('<div class = ...