I am trying to add a hover effect to a div inside a hyperlink using CSS, but I'm not sure how to do it. The divs in question have background images set in the CSS.
<div class="header_menu">
<div class="foa_logo"><img src="images/FOA-Logo.jpg"/></div>
<div class="address"></div>
<a href="#"><div class="home"></div></a>
<a href="#"><div class="about"> </div></a>
<a href="#"><div class="services"></div></a>
<a href="#"><div class="contact"></div></a>
</div>
.foa_logo {
width:100px;
transition: width 2s;
}
.foa_logo:hover {
width:200px;
}
Substitute .foa_logo for div to exclusively target that specific class.
To help you achieve the desired hover effect, I have prepared a jsfiddle for your reference. I have eliminated the unnecessary divs in the hyperlinks to simplify the process. By setting the styles for the a tags, you can easily implement the hover functionality.
.header_menu a {
display: block;
height: 40px;
width: 100px;
line-height: 3;
text-align: center;
font-family: Arial;
font-size: 14px;
text-transform: uppercase;
float: left;
position: relative;
background: url(); /*insert your image here*/
background-color: #CC0;
color: #FFF;
text-decoration: none;
}
.header_menu a:hover {
background: url(); /* insert your hover image or position here */
background-color: #ececec;
color: #000;
}
I have included some additional code for foundational styling purposes - the values for color, height, and width may require adjustments according to your specific needs.
Give this a shot:
element:hover {
property: value;
}
This allows you to modify the CSS properties of the elements when they are hovered over!
For your specific case, you can experiment with it like this:
.home:hover { // targeting the home div..
// add your changes in here
}
I am currently working on Select elements that are dynamically updated with new options at set intervals. My goal is to programmatically access these new options in order to check if a certain value exists within the select element. I attempted to use the ...
I came across a discussion about hiding a div if the screen is narrower than 1024px, and I'm looking to implement something similar based on the quoted code below. Essentially, I want to hide one div (id="krug_wide") if the window width is less than 1 ...
Presented below is a page in ASP.NET. To view the JSFIDDLE code, click on the link provided: http://jsfiddle.net/nyrUp/ HTML <div class="mainContainer"> <div> <div class="topLeft"> <% =DateTim ...
Presently utilizing bootstrap-2.1.1 In my row-fluid, I have 2 columns with input-prepends inside. Below is a snippet of code: <div class="row-fluid"> <div class="span6"> <ul> <li> <div class="input ...
My issue involves creating a row of Bootstrap cards using Laravel. When I add the "row" class, the images in the cards shrink. However, if I remove the "row" class, the images display perfectly. How can I fix this problem? <h1>Vehicles</ ...
I'm currently working on a project that involves handling the response of a CGI script located on a remote machine within a PHP generated HTML page on an apache server. The challenge I am facing relates to user authentication and account creation for ...
My web app has a username field that is case sensitive. Everything works smoothly in most cases, but there seems to be an issue with Safari on iOS and occasionally Chrome on Android. These browsers automatically capitalize the first letter of any text ente ...
I am currently working on a list with checkboxes for car options. The list is stored in an array and I am struggling to change the font color using AngularJS and HTML. This resembles a to-do list page where each car option has checkboxes for "yes" and "no ...
My webpage needs to be refreshed when the user session has expired or the connection is not active. Despite trying various codes, I have been unsuccessful in achieving this. The last code snippet that I implemented is as follows: if(session.getAttribute(" ...
I am currently working on implementing a game that involves rolling dice in Javascript/jQuery. The game has different "Phases" that the player must complete one by one without any interference from previous phases. The goal is to smoothly transition betw ...
The jquery.smartWizard plugin includes a function called fixHeight that adjusts the height of a wizard step. It is utilized when displaying a step for the first time or revealing hidden divs within the step. The function works correctly in IE and FireFox, ...
I'm looking to create a banner that adjusts appropriately for mobile and desktop display. Here's what I've tried: When it is displayed in mobile When it is displayed in desktop In my attempt, the text alignment was off even though I used ...
This is the code snippet I am working with (you can view the fiddle here): <div class='container'> <div class='hero-unit'> <h2>Welcome</h2> <p>Please log in</p> <div i ...
I'm currently working on a WordPress site and have encountered an issue with the header image. I want it to span the full width of any browser window. The existing code in the parent theme is as follows: background: url("/test/wp-content/themes/Howt ...
Exploring a new way to arrange images in grid style with a box underneath. Seeking advice on achieving this specific layout shown in an image. Current progress in positioning can be seen in this screenshot. Desired adjustments include aligning the far ri ...
I'm currently exploring the concept of css precedence rules in rails. In my application, I am looking to apply different css rules based on different controllers. However, when I add css to one of the css.scss files, it ends up affecting all controll ...
Is there a way to create a select menu that opens from right to left? When I use Google Chrome, it appears correctly. https://i.sstatic.net/tgVvM.png However, when I use Firefox, it displays an error. https://i.sstatic.net/xys5v.png Below is the code ...
Users can input an animal and it will be displayed below their previous input. <!DOCTYPE html> <html> <head> <title> Will Proj. 2</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> ...
Why is the green container expanding over the blue column when I apply height: 100% or h-100? Is there a way to make it fit just the remaining height of the column? <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstra ...
I'm working on a Vue project with a small app featuring an input type search. The issue I'm facing is that the cursor appears at the beginning of the input, whereas I want it to appear after the placeholder text. How can I make this adjustment? ...