How do I change my link colors when I hover a div?
I tried to use:
#voltarTEST {
width: 80px;
height: 62px;
padding-top: 16px;
background-image: url(../img/multiLangImage/Seta11.png);
background-repeat: no-repeat;
}
#seguinteBtn {
width: 80px;
height: 62px;
padding-top: 16px;
background-image: url(../img/multiLangImage/Seta21.png);
background-repeat: no-repeat;
text-decoration: none;
color: #777;
}
#seguinteBtn:hover {
background-image: url(../img/multiLangImage/Seta22.png);
background-repeat: no-repeat;
text-decoration: none;
color: #FFF;
}
#voltarText {
/* padding-right: 10px;*/
padding-left: 30px;
}
#voltarNEText {
/* padding-right: 10px;*/
padding-left: 30px;
}
#voltarTEST:hover {
background-image: url(../img/multiLangImage/Seta12.png);
background-repeat: no-repeat;
}
#voltarTEST a {
text-decoration: none;
font-size: x-small;
font-family: Verdana;
text-decoration: none;
color: #999;
}
#voltarTEST a:hover {
text-decoration: none;
font-size: x-small;
font-family: Verdana;
text-decoration: none;
color: #FFF;
}
#dataUltimaSincMSG {
margin-bottom: 0;
}
#estadoSinc {
margin-bottom: 0;
}
But that did not work, this only changes color when I hover over the link.
Add this:
#voltarTEST:hover a{
text-decoration: none;
font-size: x-small;
font-family: Verdana;
text-decoration: none;
color:#FFF;
}
You want to set the hover event on the div, not the link..
#voltarTEST a:hover should be #voltarTEST:hover a
The first (the way you had it) says when the link inside of the voltarTEST div is hovered on. The second says apply this style to links inside voltarTEST when voltarTEST is hovered on.
Here's a DEMO
Use the :hover on the div instead of the a :
#voltarTEST:hover a{
text-decoration: none;
font-size: x-small;
font-family: Verdana;
text-decoration: none;
color:#FFF;
}
Related
Here is my problem code and advice me something fot the portfolio pls https://codepen.com/LukaBarliani/pen/xrGyRy
Run your CSS through any CSS Linter and you will know why.
http://csslint.net/
Your CSS works fine after fixing some issues and ran through a CSS beautifier.
body,
html {
width: 100%;
height: 100%;
}
body,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
}
body {
background-image: url("");
background-repeat: no-repeat;
}
.button1 {
background-color: #008CBA;
border: none;
color: white;
padding: 12px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.button2 {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.button3 {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 8px;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-header {
padding-top: 50px;
padding-bottom: 50px;
text-align: center;
background: url('https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg') no-repeat center center fixed;
background-size: cover;
height: 855px;
}
li {
float: left;
border-right: 1px solid #bbb;
}
a {
display: block;
padding: 8px;
background-color: #dddddd;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
border: 1px solid #e7e7e7;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Change the link color to #111 (black) on hover */
li a:hover {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
li:last-child {
border-right: none;
}
I have a problem with setting the CSS on the main page of my website, www.speedy.net. I want the link color to be #146cc0, which is correct when the link is unvisited. But when the link is visited, it changes to blue. I had specific CSS for a:visited which I removed, but I checked with 4 browsers now (Chrome, Firefox, Opera and Edge) and the visited links are always blue (not #146cc0). How do I make the visited links same color as unvisited links?
Here is the CSS of the main page:
html, body {
margin: 0;
}
#top-gradient {
height: 80px;
background: url('/images/gradient.png');
margin-bottom: 15px;
background-repeat: repeat-x;
width: 100%;
}
a:link {
text-decoration: none;
color: #146cc0;
background-color: transparent;
font-family: 'Arial';
}
a > span {
color: black;
}
a:hover > span {
color: #FF0000;
}
a:hover {
color: #FF0000;
background-color: transparent;
}
a:active {
color: #990099;
background-color: transparent;
}
td {
padding: 0px 40px;
}
.wiki-link {
font-size: 40px;
}
img.main-image {
max-width: 100%;
}
.speedy-bottom-badge-link {
font-family: "lucida grande" ,tahoma,verdana,arial,sans-serif;
font-size: 11px;
font-variant: normal;
font-style: normal;
font-weight: normal;
color: #3B5998;
text-decoration: none;
}
#media screen and (max-width: 1080px) {
img.fb-badge {
width: 30%;
height: auto;
}
img.main-logo {
width: 65%;
height: auto;
}
.wiki-link {
font-size: 60px;
}
.speedy-bottom-badge-link {
font-size: 40px;
}
}
This is the CSS I removed:
a:visited {
text-decoration: underline;
color: #0000CC;
background-color: transparent;
}
Thanks, Uri.
In CSS link pseudo classes, the order matters:
a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}
Link, Visited, Hover, Active
L, V, H, A
LoVe, HAte
If you want to keep them all the same, you can just set:
a {color: blue;}
OK, I found out the bug - I had to define a instead of a:link. Here is the CSS that works:
html, body {
margin: 0;
}
#top-gradient {
height: 80px;
background: url('/images/gradient.png');
margin-bottom: 15px;
background-repeat: repeat-x;
width: 100%;
}
a {
text-decoration: none;
color: #146cc0;
background-color: transparent;
font-family: 'Arial';
}
a > span {
color: black;
}
a:hover > span {
color: #FF0000;
}
a:hover {
color: #FF0000;
background-color: transparent;
}
a:active {
color: #990099;
background-color: transparent;
}
td {
padding: 0px 40px;
}
.wiki-link {
font-size: 40px;
}
img.main-image {
max-width: 100%;
}
.speedy-bottom-badge-link {
font-family: "lucida grande" ,tahoma,verdana,arial,sans-serif;
font-size: 11px;
font-variant: normal;
font-style: normal;
font-weight: normal;
color: #3B5998;
text-decoration: none;
}
#media screen and (max-width: 1080px) {
img.fb-badge {
width: 30%;
height: auto;
}
img.main-logo {
width: 65%;
height: auto;
}
.wiki-link {
font-size: 60px;
}
.speedy-bottom-badge-link {
font-size: 40px;
}
}
I am having issues trying to make some changes to my wife's web site. I have set up multiple classes for different hover over colours etc. Eg. Lft menu all navy text except for underline & light blue with hover over, top menu all white text except for underline & light blue with hover over.
I have tried all sorts of things but can't get them to work together. One keeps overriding the other. Any help would be awesome.
The site is live. www.spunkerella.com
here is the code for the style sheet.
<style type="text/css" >
<!--
* { padding: ; margin: 0; }
body {
font-family: Verdana, Helvetica, sans-serif;
font-size: 13px;
background-color: #17215f;
}
#wrapper {
margin: 30px auto;
width: 900px;
background-color:#ffffff;
border:medium solid #00a9cb;
}
#header {
width: 900px;
float: left;
padding: 0px;
height:250px;
margin: 0px 0px 0px 0px;
background: #ffffff;
}
#leftcolumn {
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 10px;
width: 180px;
float: left;
}
#rightcolumn {
float: right;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 5px;
width: 688px;
display: inline;
}
#footer {
width: 900px;
clear: both;
background: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px;
}
.style1 {color: #17215f}
.style2 {font-size: xx-small}
a:link {
color: #453223;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #453223;
}
a:hover {
text-decoration: underline;
color: #453223;
}
a:active {
text-decoration: none;
color: #453223;
}
.style3 {color: #453223; font-weight: bold; }
.lgfont {color: #453223;}
.style4
a:link {
color: #ffffff;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #ffffff;
}
a:hover {
text-decoration: underline;
color: #00a9cb;
}
a:active {
text-decoration: none;
color: #ffffff;
}
.style5
a:link {
color: #17215f;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #17215f;
}
a:hover {
text-decoration: underline;
color: #00a9cb;
}
a:active {
text-decoration: none;
color: #17215f;
}
-->
</style>
When you specify multiple styles for the same attribute in CSS (example here: setting the color to two different ones on hover), it can only choose one of them, so the others have to get overridden. Here is a good resource on CSS styling priority:
http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
Hope this helps!
I have built a Ruby on Rails site based off the RailsTutorial. I'm trying to change a few colors, but I can't figure it out.
I would like to change the background color [body of page] and the color of the menu text. Where can I do this?
my current custom.css.scss:
#import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
#mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
html {
overflow-y: scroll;
}
body {
padding-top: 60px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
.center {
text-align: center;
h1 {
margin-bottom: 10px;
}
}
table td {
padding:0px 25px 0px 0px;
}
table th {
text-align: left;
padding:0px 25px 0px 0px;
}
/* bootstrap */
.navbar-inner {
background-color: white; /* background color will be black for all browsers */
background-image: none;
background-repeat: no-repeat;
filter: none;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $grayLight;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
p2 {
font-size: 1.1em;
line-height:1.7em;
font-weight: bold;
}
/* header */
#logo {
float: left;
margin-right: 10px;
font-size: 1.7em;
color: black;
letter-spacing: -1px;
padding-top: 9px;
font-weight: bold;
line-height: 1;
&:hover {
color: white;
text-decoration: none;
background-color: black;
}
}
...
thanks
Bootstrap has a lot of customization by default. You can find all the options here http://getbootstrap.com/customize/
Just use sass variables instead of less.
$body-bg: #fff;
$navbar-default-color: #000;
$navbar-default-link-color: #000;
and so on… You will get what you want
to change color of navbar
.navbar {
background-color: red;
}
to change navbar nav links color
.navbar-nav > li > a {
color: blue;
}
try
div.navbar{
background: red;
color:#fff
}
Change the colors to your needs.
I can't get a top margin to show in safari. CSS works fine and the #divcontainer has a top margin and is centered in firefox and other browsers but not in safari.
I would like a 10px space to show above the container which will hold all other content.
Here is the CSS:
/* CSS Document */
body {
color: #000000; /*This sets all text to Black*/
/*background-color: #FFFFFF; /*This sets the bacground to white*/
margin: 100px auto; /*This sets the margin to zero*/
padding:0;
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:center;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000099;
}
.redtext {
color: #FF0000;
}
a {
color: #009900;
}
a:link {
color: #000099;
text-decoration: underline;
}
a:visited {
color: #666666;
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: #CCCCCC;
}
a:active {
text-decoration: none;
}
.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}
.menu a:link {
color: #336600;
text-decoration: none;
}
.menu a:visited {
color: #666666;
text-decoration: none;
}
.menu a:hover {
color: #990000;
text-decoration: none;
}
.menu a:active {
color: #666666;
text-decoration: none;
}
div#container {
width: 960px;
height:760;
overflow:auto;
/*margin-left:0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
}
div#outer {
margin-left: auto;
margin-right: auto;
width: 960px;
}
div#header {
position:relative;
text-align: center;
width: auto;
}
div#nav {
width: auto;
padding: 10px;
margin-top: 1px;
position:relative;
}
div#main {
position:relative;
width: auto;
}
div#footer {
position:relative;
width:auto;
padding: 15px;
margin: 0px;
}#nav {
position: relative;
padding:20px;
width: auto;
}
You'll probably want to set the margin: 10px auto; on the #container. Usually, I do this:
body {
text-align: center;
padding: 0;
margin: 0;
}
#container {
width: 960px;
height: 760px;
text-align: left;
margin: 10px auto;
}
...assuming the #container div is the first element, that should work out.
You may also want to try out one of the css reset files out there.