<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
Related
I'm new to HTML and CCS. I would like to have an invisible link but I don't want to set the style of 'a' tags directly, instead I would like to set the style of its parent element so that it becomes invisible.
This is what I tried:
div {
color: white;
border: none;
}
a {
color: inherit;
border: inherit;
}
a:link {
text-decoration: none;
}
<html>
<body>
<div><a href='/trap'> inherit </a></div>
</body>
</html>
It doesn't show the text inside the 'a' tag, but it still shows a box around it, how I can get rid of that box?
I guess you are talking about the outline box.
You can remove it with:
div{
color: white;
border: none;
}
a, a:focus{
color: inherit;
border: inherit;
outline:none;
}
a:link{
text-decoration: none;
}
<html>
<body>
<div><a href='/trap'> inherit </a></div>
</body>
</html>
You should add this CSS property to hide the outline in all your link elements :
a, a:focus {outline : none;}
In the other hand, if you want to make an element invisible, but still be able to receive click interactions on it, you can play with the opacity CSS property (setting the font color to white is not an elegant solution)
a{ opacity:0; }
The 'box' around your link has a default outline property defined. Be sure to include outline: none; to any element or pseudo-selector that includes this treatment.
div {
color: #ccc; /* for testing purposes*/
border: none;
}
a {
color: inherit;
border: inherit;
}
a:link {
outline: none; /* removes outline */
text-decoration: none;
}
<html>
<body>
<div><a href='#trap'> inherit </a></div>
</body>
</html>
a:focus {
outline: none;
}
Is that what you are looking for?
I'm a bit confused why you are trying to make a link that is invisible in the first place, but the box you are referring to is most likely the focus box. Typically used to make it easy for the user to know what they are selecting and is good for accessibility-- it's usually not recommended to remove.
You can though by adding the code below.
a:focus {
outline: none;
}
i am trying to make a website, but for some reason i am stuck on the hover. I knew how to do this, but i thing i forgot something.
What i want is that when i hover over the black bar the black turns into white so you can see the text.
This is my code:
div.spoiler1:hover div.spoiler1 {
background-color: white;
}
<div style='display:inline; background-color: black;' class='spoiler1'>hey</div>
I also tried this css:
spoiler1:hover spoiler1 {
background-color: white;
}
div.spoiler1:hover,.spoiler1 {
background-color: white;
}
spoiler1:hover {
background-color: white;
}
Good efforts. The issue is that the inline style overrides the sheet. In general, don't use inline styles (hard to debug/maintain, not reusable):
div.spoiler1 {
background-color: black;
display: inline;
}
div.spoiler1:hover {
background-color: white;
}
<div class='spoiler1'>hey</div>
See this JSFiddle.
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'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
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