I am trying to make an element that allows a user to select an area and that in turn selects a radio button (hidden). The problem is that areas that are selectable need to be triangles, as a result I have used the following code, to create a downward pointing triangle,
width: 0;
height: 0;
border-left: 26px solid transparent;
border-right: 26px solid transparent;
position:absolute;
top:-1px;
right:1px;
border-top: 26px solid green;
My problem is now that it will not do any of the hover behaviour or :checked behaviour, I assuming that this is becase the element theoretically has no dimensions? Is there a work around for this? Basically what I want to happen is when the triangle is hovered it turns grey, when it is clicked it turns yellow and the sibling radio is checked. Here is my fiddle, I have the center (circle working).
http://jsfiddle.net/bfehyv2a/1/
try http://jsfiddle.net/bfehyv2a/4/
You will see a :hover still works as the pointer is considered to be over the element when it is on the elements border.
.green .long:hover {
border-top-color: #888;
}
Also, notice that border-top-color is used as this is the only border you are setting a colour on to create your triangle.
As for :checked status, this only applies to the radio button itself and as the triangles are not within this you won't be able to use this to set there colour. You will have to use JavaScript to set state classes, which is what you should really be doing anyway as it is a better separation of concerns.
Related
I have two buttons on my web page which look as follows...
The button on the left has the correct style border; thin and with no rounded corners.
The button on the right, which currently has focus, does not have the correct style border. When Inspecting the element within chrome, it has the following properties...
element.style {
position: absolute;
bottom: 25px;
border: none !important;
right: 140px;
}
.btn:focus {
border-radius: 0px;
}
.btn-primary.focus, .btn-primary:focus {
color: #fff;
background-color: #286090;
}
.btn.focus, .btn:focus, .btn:hover {
text-decoration: none;
}
.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
I would have thought that applying the border: none !important css property (while the element was forced into a focus state would have worked, but apparently not.
Furthermore, even when I set the border-color to yellow while the button is focused, this effect is not applied.
How can I prevent the border from being rounded off, so that it stays square and the corners remain a 90 degree angle?
What you see as an outline.
Just add this line to the button's css:
outline: none !important;
The purpose of the outline is accessabilty, so you should think carefully about removing it. You can always change the way the border looks instead.
As for !important, if you write your css right, you shouldn't use it. Inline css (style='color: blue') supercedes classes and id styling, so in your case the !important might be redundant.
There will be a lot of suggestions to remove the outline.
Before You decide to do so, please note that it'a a really bad practice from the accesibility point of view
https://medium.com/better-programming/a11y-never-remove-the-outlines-ee4efc7a9968
I am building a my first site. A big part of the specifications is that it should be very user friendly.
I have a a few images at the top of my home page that have hyperlinks attached. They have a grey border that is changed to pink when hovering over the image.
The problem I have is that I can tab my was to the images and hitting return results in the link being opened so that is fine but I the border does not change colour when I have tabbed to it, so it is difficult if not impossible to know what image you are currently tabbed to.
Border code:
<style>
IMG.HoverBorder {border:1px solid #eee;}
IMG.HoverBorder:hover {border:1px solid #FC359A;}
</style>
The :focus pseudo-class matches elements that have focus, but an img element normally does not have (and need not have) focus. But an a element that constitutes a link is focusable, so you need to use a selector that matches an img element that a child of a focused element. Example (using a 3px thick border just for clarity):
IMG.HoverBorder { border: 3px solid #eee; }
IMG.HoverBorder:hover { border: 3px solid #FC359A; }
a:focus IMG.HoverBorder {border-color: green;}
img { vertical-align: bottom; } /* to make border sit tight around */
<input placeholder="Click here and press TAB">
<img class=HoverBorder src="http://lorempixel.com/100/50" alt=dummy1>
<img class=HoverBorder src="http://lorempixel.com/100/100" alt=dummy2>
I'm building a horizontal menu in Wordpress where each menu item features a shape on both the left and right sides. The menu itself was easy enough to build and is styled as a ul with li elements. The problem I'm having is with the hover states. I'm just not sure how to style them.
Since I can't post images here, I'll link to screenshots of how the menu should look. To start, here's the menu in its standard state. Note that each li has a custom shape on both sides:
Standard State
And here's a sample mouseover. As you can see, the hover color fills the entire shape:
Hover State
That seems to be the sticking point. I can get the hover state to work on the left or right side using a background image, but not both. Even targeting each li with a unique style and unique background (which I'd rather not do) doesn't work since there's no easy way to display the li's in such a away to give the illusion of it being one shape. Likewise dividers don't seem to be the answer either since I can't figure out how to trigger hover states on them.
Anyone have any ideas? I guess I'm hoping that I'm overlooking something simple or obvious. To be clear I need this to work with Wordpress, preferably via the built in menuing system.
I think a more appropiate solution would be one without background-images. And you could use instead before and after elements, and some tricks with borders so you obtain triangles.
Here is a basic working example from which you could start.
ul{list-style-type:none;}
li{float:left; line-height:30px; font-size:25px; padding:0 10px; background: gray; margin:0 7px; position:relative;}
li:before{content:''; width:0px; height:0px; position:absolute;
left: -10px; top:0px; border:solid; border-color:gray transparent gray transparent; border-width:15px 0px 15px 10px;}
li:after{content:''; width:0px; height:0px; position:absolute;
right: -10px; top:0px; border:solid; border-color: transparent transparent transparent gray; border-width:15px 0px 15px 10px;}
li:hover{background:blue;}
li:hover:before{border-color:blue transparent blue transparent;}
li:hover:after{border-color:transparent transparent transparent blue;}
I'm trying to make a navbar as an exercise.
I'm using a:hover to include a solid border around the button being hovered. However, this makes all the other buttons move by the size of the border.
What is the proper fix to this problem? I know there are others (discussed here), I specifically tried to make the border "be invisible yet take up space even when not hovered". I set border:transparent hoping it might do what I want, but it did not show take space at all.
I know I could hand pick the border's color to be equal to the background and make it solid, but this is not what I want. Is there a sane way to solve this issue?
How about border: 10px solid transparent ?
Your best option would be to add padding or margins to your element that's the same size as the border and make the border have zero width, and then show the border and remove the padding with the a:hover selector.
Here's a sample. You can often do this with margins too.
a {
display: inline-block;
height: 2em; width: 100px;
padding: 2px;
background: #0ff;
}
a:hover {
padding: 0;
border :2px solid #000;
}
Hello World
One reason this isn't working as you'd expect is because you are only applying display:block on :hover, it needs to be applied to the element without the :hover selector or you will get the "shifting" dimensions. It doesn't matter which display type you use, you just have to make sure they are the same, and by default <a> is inline.
Another reason has something to do with your shorthand borders, you need to add a border type for the transparent version like solid instead of none.
The technique you are using is totally legit, no need for padding hacks or outline (which doesn't add dimension).
http://jsfiddle.net/Madmartigan/kwdDB/
Try this:
#wd-navbar li a {
border: medium solid transparent;
display: block;
margin: 1px;
}
#wd-navbar li a:hover {
background-color: #F5DEB3;
border: medium solid;
}
border:transparent means border: transparent 0 none
If you don't specify a property when using shorthand syntax then you reset all the properties to their defaults.
You need to give it a border-style and a border-width.
You could use the outline CSS property instead of your border, which acts like a border but isn't taken into account in the sizing calculations.
However, this does have some issues, not being supported by IEs 7 or earlier.
Setting border-color : transparent ; does the job.
a {
border-color : transparent ;
}
a:hover {
border-color : black;
}
use pseudo elements ::after and ::before to ceate invisible boundaries.
Please note that transparent border is just useful when you don't have any box-shadow on the element. Have a look at the image:
I've been trying to use a:hover pseduo class so that when you hover over the image, you get a border to appear so that it looks clickable.
However, when I do this the border appears below the image in the space below but I'm unsure why.
#overlay a:hover {
border: solid 2px #666;
}
As you can see the border is not around the image, it's below it.
Hope someone can help me with this problem.
Put the border on the image, not the anchor.
#overlay a:hover img {
If your image has position: relative or one of the crazy non-block alignments, then the enclosing link doesn't expand to surround it.
We need to see some HTML to be sure, but try to take alignment parameters off the image, and you should it working. If you made the <a> position: relative I think the link block would surround it.
Use Firebug to experiment with DOM object layouts.
Try this:
#overlay a:hover {
border: 2px solid #666;
}