I've searched but couldn't find anything relating to this problem I'm having.
I have been trying to work this out for ages now but can't seem to do it. I have a div which has text and an image in it. I want all text and background within the div to change color when I hover anywhere within the div. I have made it so that the text at the bottom changes, along with the background color, but can't seem to get the top text (h4) to change color.
It changes color when I hover directly over the h4 element but not when I hover anywhere within the div.
The link below is a rough example of what I want to achieve. There is seperate styling on the CSS of the h4 tag so can't make it a p like the rest. That would be the easiest way to do this but unfortunately they must stay different.
This is my CSS style
.container {
text-align: center;
}
.container h4 {
text-align: center;
color: black;
}
#project1 {
text-align: center;
color: white;
background-color: white;
background-color: rgba(255,255,255,0.9);
color: black;
}
#project1:hover {
background-color: blue;
color: white;
}
#project1 h4:hover {
color: white;
}
#project1 h4 {
text-transform: uppercase;
}
a {
text-decoration: none;
}
Is there any way to do this using CSS and not jquery/javascript? I'm new to Web Development so only know some HTML/CSS at present.
Thanks.
Tom
JSFIDDLE LINK
Change your CSS style from
#project1 h4:hover {
color: white;
}
To
#project1:hover h4 {
color: white;
}
JSFIDDLE DEMO
You can use
#project1 h4 {
color: inherit;
}
to make it inherit #project1's color.
Demo
You can nest h4 tag in p tag.
no need for #project1 h4:hover in CSS.
Demo Fiddle
Related
<a>Link</a>
Can we prevent this element from having any hover effect without usin :hover?
I usually go:
a {
color= white;
}
a:hover {
color= white;
}
I've checked pointer-event= none; but it disabled the entire element and made it text.
You have some syntax error in your CSS, Please update your CSS with following code:
a, a:hover {
color: white;
}
a {
color: white !important;
}
/*
So you can actually see the white link
*/
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
or if you don't want to use :hover you just add !important in your default CSS
a {
color: white !important;
}
Note: for standard practice we don't use !important frequently. So you can add this css inline. You can check updated code below..
div {
width: 50px;
height: 50px;
background-color: black;
}
<div>
link
</div>
First of all. Don't use = inside CSS but use : instead.
To disable the hover (animation) do this:
a, a:hover {
color: white;
text-decoration: none;
}
a:hover {
cursor: text;
}
However, if you assign a href attribute the link will still be clickable.
This you cant disable by css but you need javascript or jquery for that.
Example
test
I have a block (div) and which contain text with links.
When I hover over this block I need to change text color (also links color).
"div:hover" - with this text color is changed, but link color remain unchanged.
Full code:
CSS:
a {
color: #336699;
}
div {
height: 50px;
background-color: #FFF;
color: red;
}
div a {
color: red;
}
div:hover {
background-color: #336699;
color: #FFF;
}
HTML:
<div>
text test URL text
</div>
You need to target the link explicitly to override its color.
Like this:
div:hover a {
color: #FFF;
}
FIDDLE
Explanation:
You originally set the the color of the link to red with:
div a {
color: red;
}
When you then add the div:hover{} class - although it is a more specific rule than div a - it does not target the link itself - only the container of the link.
So if there was no rule which set the link color - then the div:hover{} class would kick in and color the link white on hover - via inheritance.
However since there is a rule which colors your links red - you need to target the links themselves on hover via the selector div:hover a
Try this:
div:hover, div:hover a{
background-color: #336699;
color: #FFF;
}
fiddle
You almost got it right. If you need the link to change on hovering the div, you have to do this:
div:hover a {
color: red;
}
fiddle here: http://jsbin.com/bipoq/1/
try this
<style>
a{
color: #336699;
}
div{
height: 50px;
background-color: #FFF;
color: red;
}
div a{
color: red;
}
div:hover{
background-color: #336699;
color: #FFF;
}
div:hover a
{
color: #FFF;
}
</style>
<div>
text test URL text
I have a button class working like this :
<p class="button">Rejoindre</p>
The CSS is :
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
}
.button a:hover
{
text-decoration: none;
}
How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?
You can put the link tag on the outside to make anything inside it be contained in the link:
<p class="button">Rejoindre</p>
However, you probably want to use something other than a p tag for your button, maybe a button element instead?
More info on HTML buttons.
Add display: block to the .button a ruleset.
http://jsfiddle.net/ExplosionPIlls/UvrKx/
You can add display:block; to you anchor tag.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
Fiddle: http://jsfiddle.net/akx3p/
CSS:
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
display: block;
}
.button a:hover
{
text-decoration: none;}
<p> are block elements, meaning that they naturally are at 100% width. If you just added display: block; to the anchor tag, you can make it behave the same way. Here's a fiddle
. That way allows you to get rid of the p tag all together.
I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important
I've got the following.. http://jsfiddle.net/JcLx4/31/ how would I change the properties of the hyperlinked text in this example from blue and underlined to black and not underlined?
At a very basic level, like this:
a:link
{
color: black;
text-decoration: none;
}
To make it specific to links within your custom tag (incorporating display:block to make your link stretch the width of its container):
ab.s a:link
{
color: #000;
display: block;
text-decoration: none;
}
And to change the hover style:
ab.s a:hover
{
background-color: #000;
color: #fff;
}
If you want more information there is a tutorial on this page that explains the different pseudo-classes.
ab.s a{
text-decoration:none;
color: #000;
}