I have css style:
#topmenu a:hover {
margin: 0;
padding: 8px 20px 7px 12px;
color: #FFFFFF;
text-decoration: none;
background-color: #48516D;
}
And then, I have a topmenu div with some <a> inside. I would like to disable the hover style on one of the elements, for example on this one:
<div id="topmenu">
<img width="85" src="/bundles/merrinmain/images/design/homepage.png">
How can I do this? Should I set the style="" to something else?
Thank you in advance.
You can't "reset" the styles, so to speak, on a specific element directly, but you could give it a class that is styled the same as the non-hovered links.
#topmenu a, /* apply to non-hovered links */
#topmenu a.noHover:hover { /* and apply to .noHover even when hovered */
margin: 0;
padding: 8px 20px 7px 12px;
color: fuchsia; /* yay */
text-decoration: none;
background-color: #48516D;
}
#topmenu a:hover {
margin: 0;
padding: 8px 20px 7px 12px;
color: #FFFFFF;
text-decoration: underline;
background-color: #48516D;
}
This way only links without the "noHover" class will have the hover effects applied. Note that you need to specify all the relevant properties that change (color, text-decoration etc.) in the first rule (for normal links and .noHover) in order to override the second :hover rule's properties.
Demo at http://jsfiddle.net/N8txa/
Apply another class to that item overwriting the inherited hover implementation
like css
a.mylink:hover {
margin: 0;
//some other styles
}
html
<a href="/" class="mylink">
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;
Essentially i have a pricing table with the class of .priceblock, and i have a border-bottom on my <li> tags, i simply want it to change color when i hover on the priceblock. The code to me seems correct but nothing changes.
Heres the initial li tag:
ul.pricingtable .priceblock .contents li {
font-family: 'OpenSans';
font-size: 13px;
width: 81.904762%;
height: 35px;
margin:0 auto;
padding: 10px 0;
border-bottom: 1px solid rgba(221,221,221,1);
}
And here hover state css code, this hover class works for he coloring of texts, but i can't change the border color.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
Any ideas?
I think you might need to change the hover state from.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
To:
.contents li:hover {
border-bottom: 1px solid rgba(255,117,109,1);
}
HTML may be able to read it better.
The css attributes need to be equals.
for example:
If in the first style block you write "ul.pricingtable" then you need to do that in the second block two.
And in the content of block, they need to be same.
for example:
border-bottom: 1px solid rgba(221,221,221,1);
and
border-bottom: 1px solid rgba(255,117,109,1);
You cann'ot use once with "border-bottom" and then with "border-color" only...
I want to add a block hover effect on my menu. However, the template that I bought has a large stylesheet that looks like it came out of Darth Vader's rear end - and my coding knowledge is limited making this task difficult.
Here is a fiddle of the menu part of my site (it contains the entire stylesheet as well): http://jsfiddle.net/VjhJ4/
Upon hover, I want a block hover effect with each menu link having a different block color, see this picture as example (note that I want the block to be small when the mouse is not on it): http://i.imgur.com/1xbbl.png
I came across a script that does this.
HTML:
<div id="links">
<ul>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
<li><a href="#" title="Text">Link Heading One
<em>Description of link.</em>
<span>Date posted</span></a></li>
</ul>
</div>
CSS:
#links li {
border: 1px dotted #999;
border-width: 1px 0;
margin: 5px 0;
}
#links li a {
color: #990000;
display: block;
font: bold 120% Arial, Helvetica, sans-serif;
padding: 5px;
text-decoration: none;
}
* html #links li a { /* make hover effect work in IE */
width: 400px;
}
#links li a:hover {
background: #ffffcc;
}
#links a em {
color: #333;
display: block;
font: normal 85% Verdana, Helvetica, sans-serif;
line-height: 125%;
}
#links a span {
color: #125F15;
font: normal 70% Verdana, Helvetica, sans-serif;
line-height: 150%;
}
I read that hover only works in certain IE versions on anchor elements so I would presume that this technique is the best one to go with.
Now, how can I add this to my own page? Feel free to update the fiddle: http://jsfiddle.net/VjhJ4/
And please let me know if you would need any more info.
You need to add border-bottom and background color on hover.
See this Demo http://jsfiddle.net/enve/VjhJ4/7/
see this DEMO. you need to set the background color etc on hover
Change:
a:hover { text-decoration: underline; }
to (changing the color to whatever color you actually want):
a:hover { text-decoration: underline; background-color:red; }
and change:
a { text-decoration: none; color: #00b7f3;}
to (changing the color to whatever color you actually want):
a { text-decoration: none; color: #00b7f3; border-bottom-color: red; border-bottom-style: solid; border-bottom-width: 5px;}
Demo: http://jsfiddle.net/KqaC8/
Edit: This will only do the hover color, working on the bottom color when not hovering, please hold.
Edit 2: This should do everything you want now.
http://codepen.io/anon/pen/wqpdI
Here's an example I made with what I believe you need. It's actually very simple, and there are many ways to do it! Basically each link (or it's parent) would need a class, and then you can change the colors for each class's tag.
I understand that you do not understand much of CSS, and you buy a template, so you must not knowing much of it.
Thats okay, so before all people send you stuff and solutions that you don't understand, i updated your fiddle with the result like the picture you referring at:
This is your fiddle
ul#secondary-menu a { font-size: 13px; color: #48423f; text-decoration: none; text-transform: uppercase; font-weight: bold; padding: 22px 16px 0 16px; }
ul#secondary-menu #menu-item-33 a {border-bottom:5px solid #00f;}
ul#secondary-menu #menu-item-34 a {border-bottom:5px solid #0f0;}
ul#secondary-menu #menu-item-35 a {border-bottom:5px solid #f00;}
ul#secondary-menu a:hover { color: #fff;text-shadow: 0 0;}
ul#secondary-menu #menu-item-33 a:hover {background-color:#00f;}
ul#secondary-menu #menu-item-34 a:hover{background-color:#0f0;}
ul#secondary-menu #menu-item-35 a:hover{background-color:#f00;}
If you don't want to modify the CSS you in the template you have, you can do something like this...
li.menu-item:hover{background:red !important;}
The !important will just override the templates styles
Here is a fiddle that gives you some basic css.. you can still use !important to make sure it overrides your template code http://jsfiddle.net/cX5bk/
I have a page at http://www.problemio.com/problems/problem.php,
and you see on the bottom-right I have a teal image. It is really a link and in that link I can't seem to get the text color to appear white.
Here is my CSS:
.button
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
a:button.visited
{
display: block;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
text-color: white;
font-weight: bold;
text-decoration: none;
}
and here is how I make the link with HTML:
<a class="button" id="follow_problem" href="#" title="...">Follow Problem</a>
Any idea what is going wrong and why the color of the link isn't white?
It appears that you're trying to override the styling of the a:link class Try:
Option 1:
Here is the class you're trying to override:
a:link {
color: #3686A7;
text-decoration: none;
}
You need to add !important to the end of your style declaration:
.button {
color: white !important;
}
Option 2:
You could further define the a:link class rules:
a:link.button {
color: white;
}
That's because a:link (line 95) is more specific than .button (line 109).
You can fix it by changing the rule to
.button,
a:link.button {
/* rules */
}
Tips:
While using !important will work, it is a silly workaround that will eventually get you in trouble, and it is actually a misuse - http://www.w3.org/TR/CSS2/cascade.html#important-rules
Use Firebug for Firefox, or Chrome's inspect element, to check the css affecting a given element.
In your .button class, use this: color: white !important;. The problem happens because the a style declaration is applied after the .button declaration, in effect cancelling the color you have set in favor of the link 's color property. Using !important ensures the color rule is applied over any other.
That's because you have another class in common_elements.css that has higher priority than .button
a:link
{
color: #3686A7;
text-decoration: none;
}
Try making your .button more prioritized by !important
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.