Suppose I want create nav-top-menu buttons, each button has anchor tag and href is given. I had style a:hover to each button. When I click through the link, the a:hover to that button I click was gone.I want the anchor hover remain the same after I click the link. It is better I did this in CSS.
button a:hover {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}
Try this one:
button a:hover {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}
button a:active
{
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}
You have wrong syntax in your CSS code. Here is the right solution:
a.button:hover {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}
a.button:active {
border:1px solid #000;
box-shadow:1px 1px 0px 8px #1fb6dc;
}
The class of the <a> is button.
In your question, you've used the selector:
button a:hover
This is almost certainly not the selector you need to use, this selects an element inside a element in its hover state. You might have your .button class on the actual link and then select them with:
a.button:hover
this selects an element in it's hover state.
Back to your main question, to style the link in its "active" or after it has been "activated", you need to use the :active pseudo-class selector. You should also use the :focus selector so that people using just the keyboard will see your style change too.
a.button:hover,
a.button:focus,
a.button:active {
border: 1px solid #000;
box-shadow: 1px 1px 0px 8px #1fb6dc;
}
Here I've chained all the selectors together to save you repeating the styles. You could also do it without the "a" element selector in there (depending on your other css):
.button:hover,
.button:focus,
.button:active {
border: 1px solid #000;
box-shadow: 1px 1px 0px 8px #1fb6dc;
}
If it works this way, it will make you're css a bit more flexible (see object oriented css).
Related
I have a block of text that is outlined the way I want. Now I want a shadow effect around that outline. When I apply a box-shadow, it affects the lines, which I don't want. Is there any way to apply to the outer rim only?
https://jsfiddle.net/6nrzkodu/
div span{
font-weight:bold;
outline: 2px solid green;
box-shadow: 2px 2px 5px;
}
Here is a snippet of the shadowing outside the text I'm looking for:
So you want one outline around the block?
Try displaying it as an inline-block:
div span{
font-weight:bold;
outline: 2px solid green;
box-shadow: 2px 2px 5px;
display: inline-block;
}
Just add display:block to your element, so it will still be inline, but now it is a block of element.
You probably want to use <mark> instead of <span> for that. For HTML semantics and so...
cheers ;)
div span{
font-weight:bold;
outline: 2px solid green;
box-shadow: 2px 2px 5px;
display:inline-block;
}
I need to know how to make a borders between my items like the following image:
I tried making it using border-right and -left but the last item shouldn't have a border-right.
My CSS:
border-top: 1px solid #000;
border-right: 1px solid #000;
How can I apply border-right to all but the last element on the row?
There is a better way to do it that works in older browsers: http://jsfiddle.net/mxV92/.
You simply apply a border on the left for every item that immediately follows another item:
ul > li + li {
margin-left: 5px;
padding-left: 5px;
border-left: 1px solid #bbb;
}
If I understand correctly, what you want is to have borders on the right of all the items, except the last item.
You can use the 'last-child' selector for that. For example, if your objects were in a 'div' with the class 'foo', your CSS might look like:
div.foo {
border-width: 1px 1px 0 0;
border-color: #000;
border-style: solid;
}
div.foo:last-child { border-width: 1px 0 0 0; }
This says that divs of class 'foo' should have solid black borders, with a width of 1px on top and right ('border-width' is followed by widths in the order top, right, bottom, left), except on the last item, where the width is '1px' only on the top.
':last-child' should be supported by most modern browsers.
add this to your style.css, turn off border-right every 4th books. (this only works on the desktop version of the site.)
.nspArt:nth-child(4n) .gkResponsive img.nspImage {
border-right: none;
}
You can do this:
.books-collection {
border-top: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px 0;
}
.books-collection .book:not(:first-child) {
border-left: 1px solid #bbb;
padding: 5px 0;
}
I'm having a problem with an box and its associated css outline style. When the box is focused, it should have a blue outline (working). On form validation, if there is a problem, the .error class is added changing the outline and background color red (not working)
On focus I have a style:
input, select {
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
}
input:focus{
background: #EFF5FF;
color: black;
outline: solid 2px #73A6FF;
}
For the error:
input.error:focus, .error {
outline: 2px solid red;
background: rgb(255,240,240);
}
The problem is that the outline without focus is on the outside of the input box while the outline on focus is on the inside of the box so the element jumps as you click on it (CHROME).
Please see this image:
First is on focus, second is no focus with error, third is error with focus. Notice how the no focus causes the border to expand outside the object.
Is there a good way to fix this?
Try setting outline-offset explicitly. Any valid (see Syntax section) value should do, but for moving outline inside the element a negative one can be applied, for example:
JSFiddle
input {
background: #EFF5FF;
outline: solid 2px #73A6FF;
outline-offset: -2px;
}
input.error {
outline: 2px solid red;
background: rgb(255,240,240);
}
Although you are asking about Chrome, be aware that outline-offset property is not supported in IE.
Change every outline to border and give the basic input selector a transparent border (could be grey too for example) for it not to push the second input around et Voilá :) (Updated JSFiddle)
input{
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
border: solid 2px transparent;
}
input:focus{
background: #EFF5FF;
color: black;
border: solid 2px #73A6FF;
}
input.error:focus{
border: 2px solid red;
background: rgb(255,240,240);
}
.error {
border: 2px solid red;
background: rgb(255,240,240);
}
I have a default a:hover styling however for certain things I have written a separate button class for when I want something to display as a button.
I wish for this:
.AeroButtonSlim hover
{
color: #FF0000;
cursor:pointer;
box-shadow: 1px 1px 10px 1px #42C0C4;
opacity: 0.70;
}
to override the default one, but I don't want to constantly use the !important feature.
AeroButtonSlim:hover` not space
.AeroButtonSlim:hover
{
color: #FF0000;
cursor:pointer;
box-shadow: 1px 1px 10px 1px #42C0C4;
opacity: 0.70;
}
my following css code does not work in msie.
#block a {
border-right: 2px none #eee;
border-bottom: 2px none #eee;
}
#block a:hover {
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
}
In msie, only the right border will be displayed correctly. The bottom border is totally invisible. Other browsers work fine.
can anybody help me, to make it display correctly in msie as well?
demo website is http://mmjd.com (mouse move over the text on the very right side)
The anchor in question is being displayed inline. IE does not recognise the full width and height.
Setting display:block; resolves this.
#block a {
border-right: 2px none #eee;
border-bottom: 2px none #eee;
display:block;
}
#block a:hover {
border-right: 2px solid #eee;
border-bottom: 2px solid #eee;
}