I'm trying to figure out why the text in the left navigation panel on the following page is shrinking & underlining when you mouseover in Firefox.
http://fundcentre.newireland.ie/
Everything on the left & top is part of a wrapper that we inject our content into. Our content is everything from "FUND CENTRE" down.
Can someone suggest something I could do to sort this issue out? Thanks.
Stick .content in front of all your CSS rules.
So a:hover { ... } becomes .content a:hover {...}
This will limit any damage to the content div which appears to be all yours.
There are a couple of styles applied in your newIreland.css files. Which are causing this behaviour.
.ClipboardLink a:link, a:hover, a:visited, a:active {
font-family:Arial,Verdana,Helvetica,Sans-Serif;
font-size:12px !important;
padding-bottom:2px;
text-decoration:underline !important;
// check this line making css important causes it to be underline when you hover over
}
Text on the menu with mouse hover louses "bold" and gets "underline", this because you have :hover behaviors assigned with does properties...
I've took a sneak-peak to your css, but it's way to dense for my time right now... and to repetitive as well!
Try simplifying your css with common class's and find all your :hover events, taking a closer look to does who work on the same html elements as the one's used for the menu...
better yet, assign to the menu id or
class an :hover event with the same
properties than does used for the menu in normal
state!!
Related
First thing is, I can only edit the CSS/LESS portion of the code.
I've encountered a problem, there's a span that has a background color added on :hover and a different background upon clicking it, where it gets a class .active via JS.
Problem is, on iPad and iPhone on first tap it activates the :hover styles, a secondary tap is required to turn on the added class .active. Anyone knows how to ignore the :hover style and go straight to adding a class?
Much appreciated!
Place all your :hover rules in a #media block:
#media (hover: hover) {
a:hover { color: blue; }
}
Do this
a:hover {
background-color: transparent !important; /* If it works without adding !important, then do that. It's best to avoid !important */
}
Focus
This seems to be a known issue. Please check "https://getbootstrap.com/docs/3.3/getting-started/#support-sticky-hover-mobile" for more details. Few of the possible solutions to solve the above problem is "http://www.javascriptkit.com/dhtmltutors/sticky-hover-issue-solutions.shtml"
Let's say if we go to Bootstrap's pagination section and moved that sample into our sample page, with no JavaScript whatsoever.
I think the "hover" and get grey background effect, as well as the "click" and grey background effect, is done by something like this, which I add to my page as well:
.pagination li a:focus { background: #fa6 !important }
.pagination li a:hover { background: #fa6 !important }
However, I don't know why when I inspect that <a> element on Google Chrome or Firefox's debugger, I do not see the CSS rule come into view, and also, I do not see the "computed value" of CSS showing a different value -- all it shows is #ffffff for white.
I thought I did see the :hover or :focus being listed in the CSS rules before (and the computed value will change as well in the past). What is happening and can we see that as before?
Bootstrap specifically target a to design it. You have to override the bootstrap by this way-
.pagination>li>a:focus,
.pagination>li>a:hover,
.pagination>li>span:focus,
.pagination>li>span:hover
{
background: #fa6
}
I'll try to explain this as best I can - I'm playing with a CSS vertical menu, take a look at it here:
http://codepen.io/jgclifton/pen/JIfhy
My question is, how do I ensure that the links keep their hover color when navigating to the submenu of that item.
I hope that makes sense, I tried using a:active but it seemed to have no effect.
Set the color on the hover state of the li:
.menu-side-menu-container li:hover > a
{
#FFFFFF;
}
Live Demo: http://jsfiddle.net/xxf9B/1
I am working on a css3 menu and I can't get it to work exactly how I want it to. I'm kind of new to this so be patient with me! :-)
What I want:
When you hover over the top level nav, I want the drop down to ease in AND I want the top level nav to slide up 20px AND I want the top level nav to have a bottom border appear. This is basically what it is doing in FF. However, when I do that, the second-tier nav is getting the same treatment. I don't want that. I want the second and third tier nav to just have a basic hover over color. I do want all of the hover transitions to be smooth so I am using some css3 for that also.
None of this is working in IE. Also, I understand that I can use Modernizr to polyfil some js to make the css transitions work in older browsers, but I don't know how to do that. Can someone tell me?
Here is my jsfiddle . Thanks for any help you can give me!
I changed this:
ul#navigation li a:hover {
color:#acb453;
padding-top:0;
padding-bottom:10px;
border-bottom: 6px solid #4dbaf2;
}
to this:
ul#navigation .topNav > a:hover {
color:#acb453;
padding-top:0;
padding-bottom:10px;
border-bottom: 6px solid #4dbaf2;
}
And added the class "topNav" to your top level navigations. The child combinator after the topNav class limits the style to only the first anchor. Fiddle is here: http://jsfiddle.net/zwVwh/
This should solve your problem:
http://jsfiddle.net/NFEt4/
Basically, you needed some way to override the styling of submenus. I did this with a new class on the nested ul.
If you haven't yet I would recommend checking out SMACSS (http://smacss.com/), I think it would help create a more flexible architecture in your CSS classes.
As for the modernizr question, maybe you could create a separate question to make sure you get a good enough answer for that?
Say I have a div for the main body text of a webpage, and a navigation div for links to the rest of the website. Now say I want the links in the body text to be green instead of the usual blue, but I want the links in the navigation div to be yet another color, perhaps red. If I make links green in CSS, then all the links will be green. If I make the text in the navigation div red with CSS, the link attributes seem to override the div's attributes for links in the navigation div. How can I target only certain links when no links have any classes attached to them?
Because of CSS specificity (I love that word) rules, JMC's suggestion works.
Read more about that here:
http://htmldog.com/guides/cssadvanced/specificity/
Basically, the more specific the rule is, the more likely it is to be used.
Use descendant selectors.
Style regular links, then only links within the #nav div:
a:link { color: blue;
}
a:visited { color: purple;
}
.navigation a:link, .navigation a:visited { color: green
}