I have hyperlinks that i want to change color on Mouse hover to show that they are responsive and get rich user interface but i am not able to achieve this..
Here is the fiddle..
Fiddle
And Here is the HTML...
<div id="footer" class="footer-shadow">
<div style="margin-left:auto; margin-right:auto; width:960px; ">
<div id="footerAboutUS" style="float:left; width:150px; position:relative; margin-left: 10px; margin-top: 7px;">
<label style="font-size:18px; color: #6c3f00;">About US</label>
<br/> Our Delivery Model
<br/> Solution Area
<br/> List of Industries
<br/> IT Management
<br/> Lines of Business
</div>
</div>
try to remove the a lement style attribute that overriding your css
then then use tag as below
<style>
a {
color: gray;
text-decoration: none;
font-size: 11px;
}
a:hover {
color: red;
}
</style>
You can set a different color on mouse over using 'hover' pseudo class of CSS.
Example:
.footer-shadow a:hover {
color: red;
}
Fiddle: http://jsfiddle.net/z45Xz/1/
Use class in place of style
like :
.class1{
color: gray;
text-decoration:none;
font-size: 11px;
}
and change color on hover like
.class1:hover{
color: blue;
text-decoration:none;
font-size: 11px;
}
First, remove color gray from your a elements (In you html file). Then insert this into your css:
a {
color: gray;
}
a:hover {
color: red;
}
With demo: http://jsfiddle.net/RubberPoint/d9n79/
First, Don't use inline style for <a> tag as color: gray;. because if you use inline style ,you can't override the another style (internal,external).
a{
color: gray; //you can add your more style here
}
and for mouse change over use this.
a:hover{
color: blue; //you can add your more style here
}
Otherwise, use some ID or class for html element to avoid generic changes for all <a> tag
Just add :hover selector and add !important rule to override the current style
Check this link: http://jsfiddle.net/z45Xz/4/
.footer-shadow a:hover{
color: red !important;
}
First thing as mentioned in above answers Don't use inline style.
And just
a{
color:grey;
text-decoration:none;
}
and for changing the color when u hover the mouse use psedo class "hover" like
a:hover
{
color:green;
}
Related
So I am trying to make a dog shelter website, and I was wondering if there was a way to make both the image and the text act as one, without turning it into a table. For example, when I hover over the image the text will change still colour, as if I were hovering over the text. I am very new to HTML so it may be something very simple. Thanks.
<html>
<body>
<style>
a:link {
color: black;
}
a:visited {
color: black;
}
a:hover {
color: #327da8;
}
.name {font-size:20px; font-color:black; font-family:montserrat; text-decoration:none; position:absolute; margin-top: 360px; text-align:left; border-width:1px; border-style:solid; border-color:lightgray; padding: 27.5px; border-radius:0px 0px 15px 15px;
}
a img {
border-radius: 50%;
display: block;
border: none;
}
</style>
<img style="position:absolute; margin-top:60px; margin-left:50px; border-radius:15px 15px 0px 0px;" src="https://i.pinimg.com/originals/2d/6f/8e/2d6f8ef1a4c976ce5e2a9eea5980ec92.jpg" height="300" width="200">
<a class="name" style="margin-left:50px;" href="file:///C:/Users/del0044/OneDrive/HTML%20Coding/PupLove/PupLoveLana.html">Nala <br><br> Breed: Golden <br> Retriever <br><br> Sex: Female</a>
</html>
</body>
This is the code
Use general sibling selector (~) selects all elements that are next siblings of a specified element.
in your case it should be :
a:hover ~ .name { color: #327da8; }
You can put your image and text into the same div, and give it a class name.
Then apply your CSS on that class as well as class:hover.
Example:
.image_and_text_div{
color: black;
// rest of your css property
}
.image_and_text_div:hover{
color: red // it will change only text color if you hover over the image or the text
// Or you can even directly apply CSS on the text like below
h4{
color; red//
}
}
<div class="image_and_text_div"><img hre="your image url/src" /> <h4>Puppy</h4> </div>"
<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 am trying to create a pure CSS hover effect on a block of text. This is the html..
<p class="background-switch">Ok, <span style="color:red;">now that</span> you've done that, hover me next!</p>
and the CSS..
.background-switch {
text-align: center;
padding: 1em;
max-width: 250px;
font-size: 2.2em;
border-radius: 30px;
background-color: pink;
}
.background-switch:hover {
background-color: lightblue;
color: white ;
}
It works fine without the <span> in the <p> tag..but the thing is I need the color of the "now that" to be red before hovering, and white when hovering. This is not the case as the red refuses to turn white when hovering. Is there a way to make the class property applicable to the <span> too?
Because you have:
<span style="color:red;">
Which is an inline style, it's not getting over-ridden.
The best way to fix this is to move that inline style to the CSS
.background-switch span {color:red;}
.background-switch:hover span {color:#fff;}
Or if you want to keep the inline style, then add !important in your CSS, so that the rule overrides the inline rule.
JSFiddle Demo
Add a class to your span
<p class="background-switch">Ok, <span class="random-class">now that</span> you've done that, hover me next!</p>
Then in your css :
.background-switch {
text-align: center;
padding: 1em;
max-width: 250px;
font-size: 2.2em;
border-radius: 30px;
background-color: pink;
}
.random-class {
color:red;
}
.background-switch:hover,
.background-switch:hover .random-class {
background-color: lightblue;
color: white ;
}
Try
.background-switch:hover span {
color: inherit !important;
}
You need !important to overwrite the inline styling on the span tag. Best would be if you replaced the inline styling with a class instead, this would remove the need for !important.
Your code does not work because of the selector precedence in CSS. Inline styles trump everything else. So:
<span style="color: red;"> ignores other styles.
Adding a class to your span will fix this:
<span class="something">
Remove the style="color:red;" from your span, and then add the following to your CSS:
.background-switch span {
color:red;
}
.background-switch:hover span {
color:white;
}
.background-switch span {color: red;}
.background-switch:hover span {color: #fff;}
Remove inline style from span
Adding something like this could help
.background-switch > span { color:red; }
.background-switch:hover > span { color:white; }
and remove the style inline style="color:red;
I don't understand why does this work :
.button:active {
position:relative;
top: 2px;
left:2px;
}
But this wont work :
.button:hover {
font-size:17px;
}
It works when I use id but I want it to activate for all buttons :
#btnhome:hover{
font-size:17px;
}
This works fine but with class it wont? What am I doing wrong?
Using id and it works so sure something has to do with the specificity, over riding, try this
Demo
Demo + !important
.button:hover {
font-size:17px !important; /* Actually you don't even need !important */
}
Try:
.button *:hover { font-size:17px; }
Definitely there is an external .css file included by you via using link tag, in which .button:hover {font-size:somethingelse !important;} is defined. That's why you can't change it unless using !important again.
It is specificity. The ID is taking precedent over the pseudo style. You need to either re-write the CSS to be more general, and only put the unique values on the IDs or use the IDs plus the pseudo selector.
I took the common stuff from the ID's and moved them to a base .button class:
.button{
width: 84px;
height: 46px;
background-color:#000;
border: none;
color: white;
font-size:14px;
font-weight:700;
}
.button:hover {
font-size:17px;
}
Check out this fiddle to see it in action: http://jsfiddle.net/kJfmR/
If anyone is still facing the same problem:
I had one similar to the above, my code was like this:
<style>
.btto:hover{
background-color: grey ;
cursor: pointer;}
</style>
<body>
<button class="btto" style="color:white;
background-color:black;
padding:4%;
width:50%;
border:none"> Buy Tickets </button>
</body>
I think background-color of button inside body was overriding the one inside style
so what i did was:
<style>
.btto{
color:white;
background-color:black;
padding:4%;
width:50%;
border:none;
}
.btto:hover{
background-color: grey ;
cursor: pointer;
}
</style>
<body>
<button class="btto">Buy Tickets</button>
</body>
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;
}