JS Fiddle Link
The code does not work too well on fiddle but works fine everywhere else, so ignore the drop down being out of position.
My question is: How would I select the links with css in the div with the class "dropdownCats" to style them?
You can use the id of the containing ul followed by the usual class selector:
#navTest .dropdownCats a { }
You need the id selector to make it more specific than the next most specific selector:
#navTest li a { }
Here's an updated fiddle (hover over "Categories" and the appearing links are now red).
Related
I am just trying to play around with the widget on this link and hide all the tabs on the top except "Flights", so I have one in the end instead of four.
I figured out the following CSS snippet for this, which is visible in the html on the link :
[data-cf-product="FLIGHTSHOTELS"] {
display:none;
}
So I am just trying to hide the second li in the ul that has a data attribute with value FLIGHTSHOTELS with this code, but I have no idea why it isn't working. Can anyone help?
[data-cf-selectedproduct="FLIGHTS"] > li:not(:nth-of-type(1)) {
display:none;
}
I've been playing around with CSS and using the > operator to select child elements on hover.
I'm trying to hide two divs while hovering over another. However I am not sure how to select an external div? I've got this so far:
http://jsfiddle.net/s3rdqwuq/
.shares:hover>.catlink {
display:none;
}
.shares:hover>.shareimage {
display:none;
}
The issue is with the last two parts of the CSS file (above). The > only selects child elements so in this example on hover of "shares" I want to hide "catlink" "shareimage" and show "homenetworks".
Is there a way to select external elements on:hover to achive what I am trying?
Thanks!
I'm trying to make a CSS selector that matches all links except the hovered one.
Naturally I though of using the ~ operator to catch around elements:
a:hover ~a
This works fine but it only matches elements after the hovered one, and I would like to get the ones before as well. So I though of using this:
a:hover ~a, a ~a:hover
But no success.
Here is a JSFiddle that shows what I am talking about.Of course I know I could do it easily with jQuery but I like to exploit CSS as much as possible when I think javascript can be avoided.
You cant do what you are explicitly after, without using JavaScript due to the way CSS selectors work based on DOM hierarchy and their limited potential for traversal.
However, given what I imagine you are trying to achieve, why not apply the hover to the parent element and exclude the currently hovered a?
Demo Fiddle
(and an alternative)
div:hover a:not(:hover){
color:red;
}
Demo (with green and red color)
css
a {
color: #f00;
}
div {
display: inline-block;
}
#scope1:hover > a, #scope2:hover > a{
color : #0f0;
}
#scope1 a:hover, #scope2 a:hover {
color : #f00 ;
}
The following selector matches all links except a hovered link:
a[href]:not(:hover)
When no link is hovered, this matches all links, which logically satisfies the requirement.
Note that a matches all a elements, including <a name=...>...</a> (outdated, but works) and <a>...</a> (valid, mentioned in HTML5 specs). Using a[href] restricts us to a elements that have href attribute, i.e. to links.
If you actually meant to ask for a selector that matches all links except a hovered link if there is a hovered link and no element otherwise, then there is no CSS solution (but there are JavaScript solutions).
Below is the link for the code demo
Fiddle here
There are 2 questions
Click on the links of the first accordion I(Link1 | Link 2 | Link 3), why is that acting weird
And the sub-child div in the 1st accordion content is not visible in the output. (<div>This div is not visible in the output</div>)
Thanks in advance.
Write like this:
$('.accordion > li > a').click(function(){
$(this).next().slideToggle("fast");
$(this).closest('li').toggleClass('active');
});
Define class name to the DIV instead of .accordion div{display:none}. Write like this:
.accordion .extended{display:none;}
Check this http://jsfiddle.net/zkZN6/2/
the reason is that you defined $('.accordion a').click(function(){ in your javascript which affects all tags under the class name called "accordion". you need to define another classname just specific for the "accr1,accr2,accr3...etc" and define another javascript for them.
Well as Tugkan said all the links are affected by $('.accordion a').click(function(){ that's why it is behaving strange and as far as the division is concerned the property display none is applied to it see in the inspect element.
Do something like this to make division appear :
Demo
style="display:block;"
Referencing this fiddle
I want to color the background of the LI being hovered over. However it seems to set the class on the entire set of LI elements (not just the hovered one).
Can someone see what the issue is here?
just do this:
.parentSelectorBox li:hover
{
background-color:red;
}
you don't need js to achieve hover effect. CSS will be fine.
This is because you anchor your JS to the whole list.
See that.
I don't remove all JQuery stuff, but only what set to hover your li class.
I suggest to remove JS that know is useless