I have a row of divs with :hover and it is working when I hover over the images within the divs. However, it doesn't want to work for the text. I am on the newer side of html and css, so help appreciated. I must be missing something obvious?
The first one with the div.topIconsHover:hover CSS works. The other does not. I have tried applying the topIconsHover class to the div as well and it still doesn't work. So, I must be doing something wrong with the HTML? But I'm just not sure what. Help appreciated! Thanks.
Note: I have the CSS in an external sheet.
div.topIconsHover:hover {
background-color:#555555;
}
<div class="topIcons topIconsHover">
<img src="tools16lg.png" />
</div>
div.topTextHover:hover {
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
The color attribute is working only with text elements, not divs. So you should apply the class tag to your href tag like this :
<style type="text/css">
.topTextHover:hover {
background-color:#555555;
color:#ffffff
}
</style>
<div id="topBrowse">
Browse
</div>
EDIT :
If you're looking to define a base class for the link itself, and a HOVER state, do it like this :
<style type="text/css">
.topTextHover {
background-color: transparent;
color: #0000ff;
}
.topTextHover:hover {
background-color: #555555;
color: #ffffff;
}
</style>
<div id="topBrowse">
Browse
</div>
Good luck
You applied style to the ":hover text" but not for links. This should do the trick (not tested):
div.topIconsHover:hover {
background-color:#555555;
}
<div class="topIcons topIconsHover">
<img src="tools16lg.png" />
</div>
div.topTextHover:hover, div.topTextHover:hover a {
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
Anchor tags have a default text colour which gets priority (usually blue). What you need is to define this explicitly:
div.topIconsHover:hover {
background-color: #555555;
}
div.topTextHover:hover {
background-color: #555555;
}
div.topTextHover:hover a {
color: #ffffff
}
There are two really simple ways to resolve this issue.
First if you don't have any height/width requirements on the anchor tag (<a href=''></a>) being inside the div do the following:
.topTextHover a:hover{
background-color:#555555;
color:#ffffff
}
<div id="topBrowse" class="topTextHover">
Browse
</div>
If you do have spacial requirements for the text inside the div (i.e. you want the text to be vertically-aligned to the center and horizontally centered) then I would do the following note* this is backwards compatible but is really only compliant with CSS3
#BrowseLink:hover {
background-color:#555555;
color:#ffffff
}
<a id="BrowseLink" href="browse.html">
<div id="topBrowse" class="topTextHover">
Browse
</div>
</a>
Also of note IE6 doesn't like the pseudo-class hover on anything other than an anchor tag and therefor will not work properly. This may be applicable in other browsers as well but the main one that I know that has issues is IE6 of the browsers that are typically seen on a website.
Related
I need change a color for this element
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
I call a from CSS with:
.download.box-inner-block a {
color: white!important;
}
But it does not work, why? I need this color only for the element in .box-inner-block inside .download.
Is this what you are looking for as understood in your question ?
If so you need to carefully watch how you indent and construct your css.
As you can see in my snippet I added a space between:
.download .box-inner-block a
in order to make that work.
You can also remove !important from you css as it will not be useful in that case. If you need it, don't forget to add a space bewtween white and !important
.download {
background-color: black;
}
.download .box-inner-block a {
color: white;
}
<div class="box download">
<div class="box-inner-block">
Plugin Windows
</div>
</div>
You are using the wrong selector, as .download.box-inner-block selects elements which has both download AND box-inner-block classes.
<div class="download box-inner-block"/>
To target nested elements, leave a space between the two class selectors. So the correct selector in your case is:
.download .box-inner-block a {
color: white;
}
In this case you can drop !important too.
based on the discussion here we know that it is allowed to put an <div> in an <a> tag given that we're using html5, but I was wondering that how can we change the styles in this <div>. In short, I have an html code skeleton like this:
<a href='somelink.html'>
<div style='width:100px; height:100px'>
text text text
</div>
</a>
The motivation is that I hope to achieve the effect that when the mouse hovers over the div (not only over the text), both the background and the text color in div changes. Note that somewhere in the css file, the third-party template already defines a:hover (a:focus), and I want to override the hover behavior just in this particular div. Can somebody give me a hint how I should achieve that?
To give you a concrete example, I was playing on the w3cschool.com, and the full codes are provided below. I put comments indicating where the codes to be filled in.
See the background color of the square div is light gray and the text color inside is green with an underline, and the text color changes to red when the mouse hovers over the text.
Task
I hope the effective area is the entire div, i.e., when the mouse is in the div, the following can be achieved: 1) the div changes to pink color, and 2) the text color becomes white, and 3) there's no underline when hovered anymore.
Code
<!DOCTYPE html>
<html>
<head>
<style>
/* Assume following 4 rules are provided somewhere in the existing css */
a:link {
color: green;
}
a:visited {
color: green;
}
a:hover {
color: red;
}
a:active {
color: yellow;
}
/* ==== CHANGE HERE ======== */
.fill_a {
// what is the answer?
}
.fill_div {
// what is the answer?
}
/* ==== CHANGE HERE END ==== */
</style>
</head>
<body>
<p>Mouse over and click the link: w3schools.com</p>
<a href='#' class='fill_a'>
<div style='width:100px; height:100px; background-color:#ddd' class='fill_div'>
123
</div>
</a>
</body>
</html>
Thanks for your answer in advance.
Edit 1: More background
I was seeking a non-div solution (use block'ed anchor or just a span), but the dilemma I encountered is that I was using bootstrap, especially, I want the head to be the entire link, that's kinda the motivation. For example,
<div class="panel panel-default">
<div class="panel-heading">This to be an anchor</div>
<div class="panel-body">Panel Content</div>
</div>
Based on your HTML
From your Task
CSS
.fill_a:hover{
color:white;
text-decoration:none;
}
.fill_div:hover{
background-color:pink !important;
}
you should use !important because in your html you already set the style. Meaning that the style that put inside html is priority.
Learn More about styling css https://css-tricks.com/when-using-important-is-the-right-choice/
DEMO
Try this css:
a.fill_a {
text-decoration: none;
}
a.fill_a:hover > div.fill_div {
background-color: pink !important;
color: #fff;
}
Fiddle demo here
Live site.
I'm trying to style the content currently in black under the Upcoming Events heading. I've tried every combination of .vevent-item odd event-1 .description .event-time .event-label I thought might work to no avail. Any ideas?
It should match my other <p> content.
If you are looking to style the following parts: http://i.imgur.com/BW4NR.png
Why not add a new class to those div's? For example:
<div class="event-time foo">...</div>
<div class="foo">...</div>
And in your .css file:
.foo {
background-color: red;
}
For me, just adding the following code into the <head> style tag does the job.
#main div.content div.event-item {
color: #fff;
}
I would like make all text within div.main gray except for all content within the child div.exception. div.exception should appear as if class main was never added to the parent div.
Is this possible? If so, how? Thanks!
<style type="text/css">
.main{color: gray;}
.hello{color: red;}
</style>
<div class="main">
<div>
<div class="exception"><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
for modern browser, just apply the rules to every div but .exception
.main div:not(.exception) p {
/* style for very nested div not exception */
}
otherwise override the rules later (as suggested by #jacktheripper)
This is simply done by:
.main .exception {
your styling here (e.g. color: black)
}
See this jsFiddle example
You cannot use color: inherit as this selects only the immediate parent, when you want to select two parents above. Therefore you have to override the colour 'manually'
#F. Calderan's answer is an alternative, but browser support is variable
No, that's not possible.
You can easily override the style so that it appears not to have been colored gray, but then you have to know what the original color was:
.main .exception { color: black; }
If you would set the style on the inner elements directly intead of on the main element, and set the exception class on the same level, you could override it using inheit:
<style type="text/css">
.main div { color: gray; }
.main div.exception { color: inherit; }
.hello { color: red; }
</style>
<div class="main">
<div class="exception">
<div><p class="hello">Hello</p><a>Link</a></div>
</div>
<div><p>Howdy</p></div>
<div><a>Link</a></div>
</div>
<a href="/admin/menu_bars/select">
<div class="action_box right">
Manage Menu Bars
</div>
</a>
a .action_box {
text-decoration: none;
}
doesn't work =\
Your code is trying to remove the underline from the div (which probably doesn't have one) rather than the link (which probably does). Simply
a {
text-decoration: none;
}
will work, although that will remove the underline from all links.
If you need to be more specific to that link then use
<a class="action_link" href="/admin/menu_bars/select">
<div class="action_box right">
Manage Menu Bars
</div>
</a>
a.action_link {
text-decoration: none;
}
This assumes that the underline is in fact a text-decoration on the link element and not a border-bottom on the div.
You still need to apply the text-decoration style to the outer href tag.
Example follows:
<html>
<head>
<style>
.noUnderline {
text-decoration: none;
}
</style>
</head>
<body>
<a class="noUnderline" href="/admin/menu_bars/select">
<div class="action_box">
Manage Menu Bars
</div>
</a>
</body>
</html>
Problem is, it's not putting the underline under the text, it's underlining the div. Basically you'd need to define the rule at the anchor still, not for the content inside the anchor:
a, a .action_box { text-decoration: none; }
It quite possibly could be an issue of another class / property is overriding your latest attempt; however, try what Silence Dogood said:
a div .action_box {
text-decoration: none;
}
If that doesn't work we'll need to see the rest of the CSS.
Can you not just use this.
#content > ul {
text-decoration: none;
}
The above obviously is my own.
You are trying to remove underline from div which is inside the anchor tag
Simply use
a{
text-decoration: none;
}
You can give id to anchor tag for better use,
<a id="linkid" href="/admin/menu_bars/select">
<div class="action_box right">
Manage Menu Bars
</div>
</a>
and use css
a#linkid{
text-decoration: none;
}