My link: Home page
Css:
a:hover
{
padding: 5px;
background: black;
}
When I hover over home page link, it moves, because I use padding. How can I avoid it? I want that black background would appear where the link is without moving its link and other links. Thanks.
You can add it by default:
a { padding: 5px; }
Or you can use margins:
a { margin: 5px; }
a:hover { margin: 0px; padding: 5px; }
This should work:
a {
padding: 5px;
}
a:hover {
background: black;
}
Add the same padding to the base class (a with no hover).
remove the padding on hover, if you want padding use which will be there all the times.
a{
padding: 5px;
}
Did I answer your question?
Related
I have a button . When I click on it, some weird dotted lines show up like this which I cannot remove. Tried everything I know in CSS but cannot fix. Please Help.
Here is my css:
input.filterIcon {
width: 32px !important;
height: 32px !important;
background: url(../images/filter-icn.png) no-repeat center right !important;
padding: 0px !important;
cursor: pointer;
float: right;
vertical-align: middle;
margin: 0 0 0 10px !important;
font-size: 12px;
letter-spacing: 0.5px;
position: fixed;
z-index: 99999;
top: 70px;
right: 15px;
outline: 0 !important;
}
Here is my html
<form id="search_form">
<input type="button" class="filterIcon" id="iconfilter">
</form>
Anchor links ('s) by default have a dotted outline around them when they become "active" or "focused".
If you want it gone, and you want it gone on every single anchor link, just include this as a part of your CSS reset:
a, button {
outline: 0;
}
a:hover, a:active, a:focus {
/* styling for any way a link is about to be used */
}
Firefox Inputs Clicking down on an input type=image can produce a dotted outline
To remove it: input::-moz-focus-inner { border: 0; }
Source : https://css-tricks.com/removing-the-dotted-outline/
Difficult to determine without any additional info but try adding this to the button’s css
outline: 0;
Its because of outline, you can try this code.
button, button:hover, button:focus, button:active,
a, a:hover, a:focus, a:active {
outline: 0;
}
The dotted border is there for accessibility reasons as a visual clue of what has been selected (clicked on). You can get rid of this easily by adding this CSS to the elements (class name depends on the element):
.button {
outline: none;
}
outline on the Mozilla Developer Network:
The outline CSS property is a shorthand for setting various outline properties in a single declaration: outline-style, outline-width, and outline-color.
You can remove the outline with this code:
outline: none;
How can I add these two things on the scrollbar?
padding around the scrollbar
a cursor when you hover the scrollbar
This is my code:
#style-4::-webkit-scrollbar-track
{
background-color: #fff;
}
#style-4::-webkit-scrollbar
{
width: 5px;
background-color: #fff;
}
#style-4::-webkit-scrollbar-thumb
{
background-color: #ccc;
}
#style-4::-webkit-scrollbar-thumb:hover
{
background-color: #666;
cursor: pointer;
}
You can see it here. I want to add the padding like the ones on cssdeck.
Is it possible?
About that padding. Sample 5px padding from left
#style-4::-webkit-scrollbar {
width: 10px; /* add 5px */
...
}
#style-4::-webkit-scrollbar-thumb {
box-shadow: inset 5px 0 0 0 white; /* change color to your bg color */
...
}
Adding cursor: pointer to every -webkit-scrollbar element does not unfortunately work.
Yes You can add it.
#style-4:hover{
padding:15px;
}
I think this is correct, if im wrong please let know what you expect.
Try this one for Cursor
#style-4:hover{
cursor:pointer;
}
I basically want to create a button like the big "Download Bootstrap" button on this side: http://getbootstrap.com/
Note: I want to create the button myself just with css & html and not with the twitter-bootstrap framework
I was able to do it pretty well but then I noticed that there was a bug: http://jsfiddle.net/vk5DV/
If you zoom in while hovering over the button you will notice that in the corner of the button there is something wrong. I think the link itself gets styled with the white background but I have no idea why.
#googlink a {
color: white;
transition: all 0.2s linear 0s;
}
#googlink :hover {
background-color: white !important;
color: #99CC00;
}
why does the link get a white background too (and not only the button div)?
If a border-radius is added it seems ok
eg
#googlink :hover {
background-color: white !important;
border-radius: 6px;
color: #99CC00;
}
http://jsfiddle.net/f3kzb/show/
Although if you simplify it a bit, i think it works fine with the code you already have. Also specified as a class to be used with any link.
http://jsfiddle.net/fe25t/
html
<div id="green">
Google
</div>
css
body {
margin: 0;
padding: 0;
}
#green {
background-color: #99CC00;
}
a {
text-decoration: none;
color: black;
}
.special-link {
border-radius: 10px;
margin: 40px;
display: inline-flex;
height: auto;
width: auto;
font-size: 65px;
background-color: #99CC00;
border: 2px solid white;
color: white;
transition: all 0.2s linear 0s;
}
.special-link:hover {
background-color: white !important;
color: #99CC00;
}
Do not use a div, just style the link (a).
Currently you are styling both the link and the div, which is not necessary - this creates conflicts and, semantically, is useless.
You would want to use a div only if you needed to nest multiple elements within it and then position the div to position all the elements at once (just an example).
There you go.. check this out.. The hover border has to be round so that it does not overlap the normal border. This addition is under the hood of the main button border so it does not pop out at the corners.
#googlink :hover {
border-radius: 6px;
background-color: white !important;
color: #99CC00;
}
http://jsfiddle.net/47vDq/
I have the following code and I still see the border under an image. Any idea?
a, a:visited {
color: #000000;
border-bottom: 2px solid black;
padding-bottom: 2px;
text-decoration: none;
}
img {
border: 0;
}
Maybe I should add that I'm working locally...
Code Example: http://jsfiddle.net/8WzMJ/
You put an image inside anchor and give border bottom to anchor, to remove that, remove border from the anchor
a,
a:visited {
color: #000000;
padding-bottom: 2px;
text-decoration: none;
}
or add class to anchor and style it without border
<a class="without-border" href="http://www.seobook.com/images/smallfish.jpg">
<img src="http://www.seobook.com/images/smallfish.jpg" />
</a>
.without-border {
border: none;
}
Without seeing your code, I don't know what the impact of this might be, but you could try:
img{
float:left;
padding-bottom:2px;
}
I have a newsfeed which is obviously organized by an . When the user hovers over each of the items, the background is highlighted. I'd also like to have a small "x" in the top right hand corner of each item, only shown when hovered. This "x" would be a delete button to remove that post.
Right now I just have some basic html stating: <div class="hide-button">x</div>
I know that I don't want the "x" displayed in the html, but rather have it in the CSS. So I have the <li> css below for hovering, as well as the CSS for the hide button. I'd like to know the best method to integrate the hide button div into the <li>
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: gray;
}
.hide-button a{
text-decoration: none;
color:gray;
}
.hide-button a:hover {
text-decoration: underline;
color:gray;
}
and the list:
.newsfeedlist li {
background: white;
border-bottom: 1px solid #E4E4E4;
padding: 12px 0px 12px 0px;
overflow: hidden;
}
.newsfeedlist li:hover {
background-color: #F3F3F3;
}
Thank you so much!!!!!
Presuming your delete buttons are inside another container you could do something like
.hide-button {
float: right;
margin-top: -13px;
font-size: 11px;
font-family: helvetica;
color: tray;
display: none;
}
... the other bits of CSS ...
.newsfeedlist li:hover .hide-button {
display: block;
}
Modifying the close button to be hidden by default and then when hovering on a list item you set the display back again on the close button.
Hope this makes sense
Tim
You might really be in need of this:
Demo at jsFiddle.net
I modified an example and tushed it up for multiple content areas or images.
But hide-button element in the li and do
.newsfeedlist li:hover .hide-button {
display: inline-block;
}
and add display: none; to .hide-button
Otherwise, there's always javascript.