I am presenting several boxes with a box class
Check out my CSS below
.box {
width:100%;
min-height:20px;
color:#000000;
font-size:16px;
border:1px solid #666666;
}
.box a {
color:#000000;
font-size:16px;
text-decoration:underline;
}
.box a:hover {
background:#666666;
}
Is there a way to apply a background color to the whole div when hovering?
If you only want to change the background of the box when hovering over the anchor, not the box itself.
To achieve this effect, you can modify the structure of the divs as shown below:
HTML
<div class="container">
<a href="#">Link</a>
<div class="box"></div>
</div>
CSS
.container {
overflow: hidden;
}
.container .box {
width:100%;
min-height:20px;
color:#000000;
font-size:16px;
border:1px solid #666666;
}
.container a {
color:#000000;
font-size:16px;
text-decoration:underline;
float: left;
}
.container a:hover + .box {
background:#666666;
}
Here's a JSFiddle demonstration illustrating how it functions.
Take a look at this LIVE DEMO to see it in action
CSS Code:
.container{
background: gray;
width: 50px;
height: 50px;
padding: 100px;
}
.container:hover{
background: yellow;
}
When I click a button, the image on the screen disappears. I am looking to add a fade effect to this action. Can someone help me achieve this using CSS? #hide{-webkit-transition: all 1s ease-in-out;} For reference, here is a demo showcasing the current b ...
In my current project, I have created various responsive boxes for displaying news articles on the website. Everything seems to be functioning well except for the news items within the slider at the top of the main content. Surprisingly, they are displayin ...
In the process of developing an Ionic application, I encountered a strange issue where the dynamic class set through ng-class suddenly stopped working. Despite being correctly resolved in the HTML, the selectors associated with it simply do not apply. Her ...
Take a look at this code snippet: http://jsfiddle.net/56qwuz6o/3/ <div style="display:flex"> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> </div> div div { ...
I have a programming idea that involves the following: * Clicking on Span 1 will reveal Span 2 and disable Span 1. * Clicking on Span 2 will reveal Span 1 and disable Span 2. Below are the codes I have written, but I am not sure if they are correct. Any a ...
My inputs have validation indicators, such as a green tick or red cross, placed at the very right of the input (inside the input). Is there a way to specify the writing space inside an input without restricting the number of characters that can be enter ...
I am attempting to align two corners of an element so that they perfectly match the corners of another element. In simpler terms, I am aiming to synchronize the corners of one element with those of another element. Below is the code snippet: ... When y ...
@page { size: 11in 8.5in; } This code snippet did not achieve the desired result in Internet Explorer or Firefox. The transform: rotate(270deg); property only worked for the first page. ...
Upon examining this snippet of HTML: <html> ... <iframe> #document <html> ... <div className='change-me'></div> ... </html> </iframe> </html> This iframe has be ...
I have two pages, chat.php and allchat.php. I have successfully been able to load the allchat.php page into the chat.php div after a 10-second interval using the following code: $(document).ready(function(){ setInterval(function() { $( ...
In my HTML code, I have a div with the class "card" which contains a footer: <div className='card'> <img src={thumb2} /> <footer> <p>Beautiful and cozy house for you and your family</p> <sp ...
I have transferred all my HTML pages, CSS, and supporting files to Bluehost. While everything works fine locally, there seems to be an issue once it's on the server. The CSS file, located in the same directory as index.html, uploads successfully to th ...
I encountered a problem with my popup that I created using pure CSS. When I move my mouse to the top or bottom of the window, the popup disappears. However, if my cursor is in the body area, the popup appears as intended. I have not used any JavaScript in ...
I recently discovered that utilizing jQuery allows for updating the content within a div. My goal now is to enhance this script so the content remains consistent, even while loading or not. Take a look at my current code: function changeContent () { va ...
Looking to create a layout with the following structure: (using MVC3 - The entire HTML is in the Layout.cshtml) A top header consisting of a banner and menu bar Content divided into left and right panes Footer The right pane contains tabs, and its heigh ...
I am experimenting with the CSS counter reset feature to create a numbering system on my website. The main list should be in regular decimal format (e.g. 1, 2, 3, 4) while the sub-list should be in upper Roman numerals (e.g. I, II, III, IV, etc). Below is ...
I'm having trouble applying a gradient color to my border using the border-image property. When I use border-image: linear-gradient(-180deg, #2D6BD0 0%, #83B8FF 100%);, I'm only seeing a single dot in each corner of my DIV. Does anyone know why t ...
I am attempting to achieve a similar effect to the one displayed here, with a white line and circles running down the center of a single-page layout, using bootstrap 3. My initial thought was to have a column with a right border spanning the entire layout ...
I am looking to achieve a smooth sliding out effect for my sidebars while expanding the width of the middle content div. I want this action to be toggled back to its original state with another click. Here's what I've attempted so far: $(' ...
To create a hover effect where the corresponding column and row are highlighted when the mouse is on a cell, as well as highlighting the row for player 1's actions and the column for player 2's actions, I attempted the following code: /* CSS Cod ...