Related
I am trying to style a button that is disabled, but the styling doesn't take effect, and go back to the old styling. I have cleared my cache, to no avail. I have a button that gets disabled using JavaScript with document.getElementById("updateAccountButton").disabled = true;. This aforementioned button also has the class of btn-signature-green. Inside my stylesheet, I am trying to set the styling of this button when disabled using:
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
/* styles go here */
}
This is because I have other buttons that may have disabled attributes that I want to account for.
Code snippet:
$(window).on("load", function() {
document.getElementById("updateAccountButton").disabled = true;
});
/* disabled button */
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
background-color: #afafaf;
color: white;
}
.btn-signature-green {
-moz-box-shadow: 0px 6px 11px -7px #5fd623;
-webkit-box-shadow: 0px 6px 11px -7px #5fd623;
box-shadow: 0px 6px 11px -7px #5fd623;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #67e827), color-stop(1, #81de52));
background: -moz-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -webkit-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -o-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -ms-linear-gradient(top, #67e827 5%, #81de52 100%);
background: linear-gradient(to bottom, #67e827 5%, #81de52 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#67e827', endColorstr='#81de52', GradientType=0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
border: 0px;
cursor: pointer;
color: #ffffff !important;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
}
/* the green button when hovered over */
.btn-signature-green:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #81de52), color-stop(1, #67e827));
background: -moz-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -webkit-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -o-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -ms-linear-gradient(top, #81de52 5%, #67e827 100%);
background: linear-gradient(to bottom, #81de52 5%, #67e827 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#81de52', endColorstr='#67e827', GradientType=0);
background-color: #81de52;
color: black !important;
}
/* the green button when clicked */
.btn-signature-green:active {
position: relative;
top: 1px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<button class="btn-signature-green" id="updateAccountButton">disabled button</button>
The disabled style is overlapped by the parent style.
Instead of background-color, use background on :disabled style.
And the parent button has got color style with !important so it is needed to set the color with important on :disabled selector style.
And to disable hover effect when disabled, it is needed to set pointer-events: none;.
$(window).on("load", function() {
document.getElementById("updateAccountButton").disabled = "disabled";
});
/* disabled button */
.btn-signature-blue:disabled, .btn-signature-green:disabled, .btn-signature-red:disabled {
background: red;
color: blue !important;
pointer-events: none;
}
.btn-signature-green {
-moz-box-shadow: 0px 6px 11px -7px #5fd623;
-webkit-box-shadow: 0px 6px 11px -7px #5fd623;
box-shadow: 0px 6px 11px -7px #5fd623;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #67e827), color-stop(1, #81de52));
background: -moz-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -webkit-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -o-linear-gradient(top, #67e827 5%, #81de52 100%);
background: -ms-linear-gradient(top, #67e827 5%, #81de52 100%);
background: linear-gradient(to bottom, #67e827 5%, #81de52 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#67e827', endColorstr='#81de52', GradientType=0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
display: inline-block;
border: 0px;
cursor: pointer;
color: #ffffff !important;
font-family: Arial;
font-size: 15px;
font-weight: bold;
padding: 5px 11px;
text-decoration: none;
}
/* the green button when hovered over */
.btn-signature-green:hover {
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #81de52), color-stop(1, #67e827));
background: -moz-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -webkit-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -o-linear-gradient(top, #81de52 5%, #67e827 100%);
background: -ms-linear-gradient(top, #81de52 5%, #67e827 100%);
background: linear-gradient(to bottom, #81de52 5%, #67e827 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#81de52', endColorstr='#67e827', GradientType=0);
background-color: #81de52;
color: black !important;
}
/* the green button when clicked */
.btn-signature-green:active {
position: relative;
top: 1px;
}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<button class="btn-signature-green" id="updateAccountButton">disabled button</button>
You are using two different properties, you are setting a background on your button but a background-color on the disabled, background takes priority so it looks like it doesn't work as you'd expect.
To fix this you just need to use the same properties between disabled and active buttons.
I have to do a soccer team shield with css, the idea is do a circle with the team colors and I have done the circles for shields with 1 or 2 colors but I am having troubles with 3 color shields
I'm using this for 2 colors shields
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 50%, #FFFFFF 50%);
background-image: -o-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -moz-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -webkit-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
background-image: -ms-linear-gradient(left, #01135B 50%, #FFFFFF 50%);
display: inline-block;
}
<div class="equipo"></div>
but I want that it have 3 color and I try this, but it doesn't work
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
display: inline-block;
}
<div class="equipo"></div>
What I have to do, I want 3 or more colors?
It is the nature of CSS gradients to behave, well, like gradients. The trick for having discrete colors, which do not blend, is to make the blend area have no width. This is done by putting two colors at the same point on the gradient, as shown below.
.equipo {
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -o-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -moz-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -webkit-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
background-image: -ms-linear-gradient(left, #01135B 33%, #FFFFFF 33%, #FFFFFF 67%, #DF0408 67%);
display: inline-block;
}
<div class="equipo"></div>
Add the same color again, if one ends at 30%, the next one should start at 30%,
As so: -moz-linear-gradient(left center , #01135b 30%, #ffffff 30%, #ffffff 65%, #df0408 30%)
This will essentially make a hard edge/stop on the previous color
.equipo {
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
display: inline-block;
background: -moz-linear-gradient(left center , #01135b 32%, #ffffff 32%, #ffffff 66%, #df0408 66%);
}
<div class="equipo"></div>
Apply the same principal to the rest.
Try this just added new linear gradients which is overriding your styling if this is what you were looking for you can remove the upper gradients. Also added one alternate with many colors.
.equipo{
border-radius: 50%;
vertical-align: middle;
border: 1px solid #333333;
box-sizing: border-box;
width: 25px;
height: 25px;
background-image: linear-gradient(to right, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -o-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -moz-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -webkit-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
background-image: -ms-linear-gradient(left, #01135B 20%, #FFFFFF 50%, #DF0408 30%);
display: inline-block;
background-image: -o-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
background-image: -ms-linear-gradient(top, #a8e9ff 0%, #052afc 25%,#ff8d00 100%);
background-image: -webkit-gradient(linear, right top, right bottom, color-stop(15%,#a8e9ff), color-stop(32%,#052afc),color-stop(90%,#ff8d00));
}
.grad {
background-image: -moz-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
background-image: -webkit-linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
background-image: linear-gradient( to right, red, #f06d06, rgb(255, 255, 0), green, blue, gray, purple );
}
<div class="equipo"></div>
<div class="equipo grad"></div>
here i worked for a flag, this is same as your requirement, try this
.flag-sample {
border-radius: 50%;
border: 1px solid #333333;
width: 100px;
height: 100px;
display: block;
background: -moz-linear-gradient(left center , #01135b 33%, #ffffff 33%, #ffffff 66%, #df0408 66%);
}
<div class="flag-sample"></div>
I'm not sure which part to change on this radio button to make it smaller and keep the text in line with the inner button. The changes I made puts the text to the top of the radio button. Could you advise which bits are necessary to change to keep everything in line.
This is a big radio button
.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
border-radius: 40px;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 15px Arial, Verdana, Geneva, sans-serif;
line-height: 41px;
padding-right: 20px;
}
.button:hover .inner {
opacity: .5;
}
.button input {
display: none;
}
.button input:checked + .outer .inner {
opacity: 1;
}
.button .outer {
background: #2989d8;
background: -moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
background: -webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
border: 1px solid black;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
display: block;
float: left;
height: 20px;
margin: 10px;
width: 20px;
}
.button .inner {
background: #e4f5fc;
background: -moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
background: -webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
display: block;
height: 14px;
margin: 3px;
opacity: 0;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
width: 14px;
}
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Add Details
</label>
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Choice 2
</label>
</div>
I've attempted to change what I thought but the writing is now at the top of the button and I'd like it in the centre, so I must be changing the wrong parts
HTML after changes
.button {
background: #cfe7fa;
background: -moz-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cfe7fa), color-stop(100%, #6393c1));
background: -webkit-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -o-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: -ms-linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
background: linear-gradient(top, #cfe7fa 0%, #6393c1 100%);
border: 1px solid #6393c1;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .5);
cursor: pointer;
display: inline-block;
font: 10px Arial, Verdana, Geneva, sans-serif;
line-height: 3px;
padding-right: 5px;
}
.button:hover .inner {
opacity: .5;
}
.button input {
display: none;
}
.button input:checked + .outer .inner {
opacity: 1;
}
.button .outer {
background: #2989d8;
background: -moz-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #2989d8), color-stop(99%, #101354));
background: -webkit-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -o-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: -ms-radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
background: radial-gradient(center, ellipse cover, #2989d8 0%, #101354 99%);
border: 1px solid black;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
display: block;
float: left;
height: 10px;
margin: 5px;
width: 10px;
}
.button .inner {
background: #e4f5fc;
background: -moz-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #e4f5fc), color-stop(50%, #bfe8f9), color-stop(51%, #9fd8ef), color-stop(100%, #2ab0ed));
background: -webkit-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -o-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: -ms-radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
background: radial-gradient(center, ellipse cover, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
display: block;
height: 10px;
margin: .5px;
opacity: 0;
-moz-transition: opacity .5s;
-webkit-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
width: 10px;
}
<form id="form1" runat="server">
<div>
<br />
<br />
<div style="text-align: center;">
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Add Details
</label>
<label class="button">
<input type="radio" name="button" />
<span class="outer"><span class="inner"></span></span>
Choice 2
</label>
<br />
<br />
<br />
<br />
</div>
<br />
</div>
</form>
Just change the line-height: 3px; to line-height:22.5px;
See also the jsfiddle example.
Now I found this already of SO, and everyone seems to think it works great How do I combine a background-image and CSS3 gradient on the same element?
For some reason when I do it, it fails. The image works alone, and so does the gradient. What am I doing wrong?
.cSub {
background: #00f;
background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -moz-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -webkit-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -o-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -ms-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background-image: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, linear-gradient(135deg, #0088b7 0%, #006da4 100%);
border-top: 2px solid #0089b7;
}
You have background-image as the property but you put all the background value for it, just put background instead of background-image.
.cSub {
background: #00f;
background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -moz-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -webkit-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -o-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, -ms-linear-gradient(-45deg, #0088b7 0%, #006da4 100%);
background: url("../images/header/Down_Arrow.svg") 9px 8px no-repeat, linear-gradient(135deg, #0088b7 0%, #006da4 100%);
border-top: 2px solid #0089b7;
width:200px;
height:auto
}
you need to mentiion width and the height to get display the background.
I am currently using 2 CSS bars one appears over the other on mouse over of the bar. I would like a better solution using just 1 CSS bar and changing the text on mouse over of the bar not the text.
How can this be done?
Here is my Code.
index.shtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="../style.css" rel="stylesheet" type="text/css">
<!--#include virtual="../navigation.shtml"-->
</head><body>
<br>
<ant class="globalmenu">
Title</ant>
<can class="globalmenu">Menu</can>
<div style="text-align: center;" class="content"><big><big><span style="font-weight: bold;"><big>Test Page<br><br>
<br>
<br>
<br>
<br>
<br>
</big><br>
</span></big></big>
</div>
<br>
<br>
</body></html>
style.css
body {
background: -moz-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%);
background: -webkit-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0, #06fffd), color-stop(0.17, #1cbec0), color-stop(0.71, #00ffee), color-stop(1, #1d7781));
background: -o-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%);
background: -ms-linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%);
background: linear-gradient(left, #06fffd 0%, #1cbec0 17%, #00ffee 71%, #1d7781 100%);
/*background-color: rgb(102, 255, 255);*/
color: rgb(0, 0, 0);
}
.middle {
text-align: center;
}
.socialbar {
position: fixed;
bottom: 0;
left:20%;
height: 48px;
width: 60%;
background: #282828;
color: white;
text-align: center;
}
p{
white-space:normal;
}
.content {
margin-top: 22px;
margin-left: 64px;
margin-bottom: 48px;
padding: 10px;
}
.globalmenu {
position: fixed;
top: 0;
left: 0;
bottom: 0;
height: 22px;
width: 100%;
/*background: #282828;*/
background: -moz-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%);
background: -webkit-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #9d9d9d), color-stop(0.17, #4b4c4c), color-stop(0.71, #2f3232), color-stop(1, #000000));
background: -o-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%);
background: -ms-linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%);
background: linear-gradient(top, #9d9d9d 0%, #4b4c4c 17%, #2f3232 71%, #000000 100%);
color: white;
opacity:0.9;
}
can {
display:none ;
}
ant:hover + can {
display: inline;
float: left;
}
.globalmenu a:link { color : white; }
.globalmenu a:visited{color:yellow}
.globalmenu a:hover{color:red}
.globalmenu a:active{color:lime}
body a:link {color:black}
body a:visited { color : purple;}
body a:hover {color:red}
body a:active {color:green}
I'm not really sure what' you're trying to do with the <can> and <ant> tags, but I have the slightest suspicion that you're doing it wrong.
In any case, try something like: http://jsfiddle.net/uJ7j4/
HTML
<div class="globalmenu">
<ant>Title</ant>
<can>Menu</can>
</div>
CSS
.globalmenu can {
display: none;
}
.globalmenu:hover can {
display: inline;
}
.globalmenu:hover ant {
display: none;
}