Imagine a rectangular div divided into two parts, each part forming an L shape (as illustrated below), with region 1 representing the left-side L and region 2 representing the right-side L.
I am interested in changing the background color of region 1 on hover, as well as doing the same for region 2. Is there a CSS-only way to achieve this effect without using JavaScript?
____ ___
| __| |
|_|_____|
Snippet: http://jsfiddle.net/nts32/
HTML Code:
<div id="left">
<div></div>
</div>
<div id="right">
<div></div>
</div>
CSS Styling:
#left, #right {
height:300px;
width:150px;
position:absolute;
}
#left > div, #right >div {
height:150px;
width:150px;
position:absolute;
}
#left, #left > div {
background-color:#cef;
}
#right, #right > div {
background-color:#fec;
left:300px;
}
#left > div {
left:150px;
}
#right > div {
left:-150px;
top:150px;
}
#left:hover, #left:hover > div {
background-color:#acd;
}
#right:hover, #right:hover > div {
background-color:#dca;
}
Had a blast!
Check out this link for more details.
The secret is that the rectangle consists of two sets of div elements, each set enclosed in a shared parent container. The magic happens when the CSS ":hover" property is applied to the parent.
My current issue involves adding an Image to my webpage. However, every time I hit the refresh button, the image disappears. After researching on Stack Overflow, it was suggested to include window.onload=yourDrawFunction() in the code. Despite following th ...
Dealing with HTML that appears like this can be challenging: <font color=3D=22=236EAED2=22 style=3D=22font-siz= e:13px;font-family:arial;=22><B>Some Info Here</B></font></= A></td></tr><tr><td><font ...
As a newcomer to the world of coding, I am excited about working on a side project that allows me to practice what I am learning in my courses. My project so far is a temperature calculator that incorporates basic HTML and JS concepts. My goal is to improv ...
I have searched extensively for information on how to use AJAX, but I have been unable to find a resource that clearly explains the concept and its workings. When I send an AJAX request to a PHP file using the code below, I can see the response in Mozilla ...
Html <p-table #dt1 [columns]="cols" [value]="cars1"> <ng-template pTemplate="header" let-columns> <tr> <th *ngFor="let col of columns"> {{col.header}} </th> ...
<?php require_once('./database.php'); if(isset($_REQUEST['submit1'])) { $number = $_REQUEST['whatsappnumber']; $code = $_REQUEST['countorycode']; $sql = "INSERT INTO whatsapp (whatsappnumber,counto ...
After completing my code for a beginner's HTML/CSS project, I realized that the main parent container holding two smaller containers needed to be set at specific widths. The two inner containers had to be exactly 650px and 270px wide, while the main p ...
There is a caption under each image. <p> <a href="large.jpg"> <img width="85" height="75" src="thumb.jpg/> </a>Caption</p> I am looking to display the same caption at the bottom of the lightbox. <span id="lightbox-image ...
I am working on a feature to dynamically add buttons to the DOM using JSON data fetched from an API when users visit the site. Although I have successfully implemented the function to retrieve the data, I am facing challenges in adding these buttons dynami ...
Within my HTML structure, I have three vertical divs that each contain multiple inner div elements. I am looking to achieve a responsive layout where the inner divs wrap into either a 2-column or 1-column grid based on the browser's height and width. ...
I am trying to create a user-friendly interface where users can view and edit their information in a listview. The data will be retrieved from a database and displayed in the listview. My goal is to make the listview editable, so when a user clicks on it ...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Using Bootstrap 3 and Bootstrap 4 in the Same HTML File</title> </head> <body> <div class="bootstrap3"> Some code her ...
I attempted to create a new CSS class to customize the appearance of the dropdown menu, but unfortunately, it doesn't seem to be taking effect. #form.py class fundForm(forms.Form): fund = forms.ChoiceField(choices=FUND, required=True, widget=for ...
I've been struggling with this issue for almost three days now. After reading numerous articles on creating a three-column layout and experimenting with absolute and relative positioning, I'm still not able to achieve the desired result. What I& ...
Has anyone encountered a strange issue while building an HTML table for an HTML email? Whenever I insert an image into a <td>, it causes the cell to expand to its maximum width, affecting all the columns to the right by resizing them to their minimum ...
Here is the HTML code I am working with: <div class="actions"> <input id="submit-car" name="commit" type="submit" value="Добавить объявление"> </div> and here is a fiddle example: http://jsfiddle.net/348U4/ In ...
I'm facing a situation where I need to extract data from a JSON format using PHP. However, I'm struggling with how to structure the Javascript object in order to dynamically create the JSON format. Here is my current scenario: <input title=" ...
This piece of code is perfectly styled with blueprintcss: <div class="container"> <div class="span-12" style="background-color : cyan"> Hello </div> <div class="span-12 last" style="background-color : green"> Bye </div& ...
My module contains a table structure with specific components. Here is the source code for table.component.html: <table border=1> <theader></theader> </table> The source code for theheader.component.html is as follows: <thea ...
My button CTA is not redirecting to the second part of the webpage despite using onclick and <a href:"#" methods. The button is supposed to link to either the About section or the accordionFlushExample id, but nothing seems to trigger a response. Any s ...