I am having problem in calling html elements from CSS, via CSS selectors. Strangely, the class selectors are working, but i can not select the elements from CSS. So i had to give them classes.
What i want to do is; When the Mouse hovers on i want <ul> to appear, and when Mouse does not hovers <a>, I want <ul> (menu) to dissapear.
Html:
<div id="cFilter">
Sort by date
<ul class="uls">
<li class="lis">From old to new</li>
<li class="lis">From new to old</li>
</ul>
</div>
Css:
.menus {
color:#2a2d4d;
float:left;
margin-left:13px;
margin-top:20px;
text-decoration:none;
text-align:center;
background-color:#ffd800;
width:200px;
height:40px;
position:relative;
z-index:9999;
}
.menus:hover > ul{
color:#4d78bd;
cursor:pointer;
display:block;
}
.uls {
display:none;
background-color:#808080;
width:150px;
height:60px;
margin-top:60px;
list-style-type:none;float:left;
position: absolute;
margin-left: 14px;
margin-bottom:-100px;
}
.lis:hover {
color:#eedede;
cursor:pointer;
}
Here is my fiddle: JSFiddle
Hope someone can help me..
It's because you're using the wrong selector:
.menus:hover > ul {
The > is a direct child selector. And your ul is not a child of your a.menus. They are sibilings, so you would have to use + for imediate sibilings, or ~ for general sibilings:
.menus:hover ~ ul {
http://jsfiddle.net/rdLjkt64/2/
Try some thing like this
.menus:hover + .uls
{
color:#4d78bd;
cursor:pointer;
display:block;
}
OR
.menus:hover + ul
{
color:#4d78bd;
cursor:pointer;
display:block;
}
DEMO
Add plus
.menus:hover > .uls
to
.menus:hover + .uls
try like this
.menus:hover ~.uls
{
color:#4d78bd;
cursor:pointer;
display:block;
}
If you want to use Element selector instead
.menus:hover ~ ul
{
color:#4d78bd;
cursor:pointer;
display:block;
}
> is a direct child selector, so it wont wok as ul is not a child
Demo Fiddle
You are trying to display the next element (<ul>) on hovering the previous one (<a>). To achieve this use the "+" selector to affect the next sibling:
.menus:hover + ul
instead of the child selector (>) you have been using before.
.menus:hover > ul
Here is the updated fiddle
But this causes the to hide again if you enter it by mouse, so replace the hovered Element with its parent and use the child selector again:
#cFilter:hover > ul
like in this fiddle
Related
I am getting a problem with my project where our client has used a logo image inside the menu's ul li. He has used a class with li where the logo is placed but I cant use the class with it; I also do not want to use :nth-child because in future we may add a new menu element. I currently have an empty anchor inside the logo li. Is it possible in the CSS to select this anchor which is empty. Please help me.
Thanks in advance
Client Site: http://www.kangaroopartners.com/about/
My Site: http://kangaroopartners-2.hs-sites.com/test1
Demo http://jsfiddle.net/thwkav0e/
CSS and HTML:
ul {
display:block;
width:100%;
text-align:center;
list-style: none;
margin:0;
padding:0;
}
ul li {
display:inline-block;
padding: 10px;
}
ul li:nth-child(4), ul li:last-child {
background:red;
width:50px;
}
<ul>
<li>Hello1</li>
<li>Hello2</li>
<li>Hello3</li>
<li></li>
<li>Hello4</li>
<li></li>
</ul>
:empty selector should be what you are looking for.
ul li a:empty {
background:red;
width:50px;
display: inline-block;
height: 10px;
}
http://jsfiddle.net/thwkav0e/1/
i am new to css, i have written code to display some text on hover. But it is not working
HTML:
<div id="onHover"> 5
<span>
<ul>
<li>Ankur</li>
<li>Dhanuka</li>
</ul>
</span>
</div>
CSS:
#onHover span:hover
{
bottom:130px;
left:105px;
padding:8px 8px 10px 8px;
display:block;
border:1px dashed #09f;
background-color:#FFF;
min-width:170px;
position:relative;
z-index:101;
}
#onHover span:hover ul {
font-weight:normal;
list-style:none;
margin:10px 0 0 0;
padding:0;
position:relative;
}
span {
display:none;
}
you can also see this fiddle http://jsfiddle.net/ankurdhanuka/ccFxu/
please help
Thanks in Advance
Your HTML should look like this (the span is useless, so I took it out, it also isn't allowed in HTML4. It is in HTML5 tho...):
<div id="onHover"> 5
<ul>
<li>Ankur</li>
<li>Dhanuka</li>
</ul>
</div>
Then you can add a :hover effect on the div, like this:
#onHover ul {
display: none;
}
#onHover:hover ul {
display:block;
}
As you can see, the :hover is on #onHover, but it triggers the ul within it.
DEMO
Nice Try, friend. Give :hover to #onHover as 5 is enclosed within #onHover.
Use position only if it is required.
check this.
http://jsfiddle.net/ccFxu/3/
You are setting display:none to the span through css.
The elements which are set as display:none will not be visible and are actually take no space in the view. Hence you cant able to hover on span which is actually not available because of display:none.
I have a <ul> <li> list where in HELP, MISC and POLICIES are the headings with no <a> tag.
other <li> elements have hover effect as font-size:16px (normal size is 14px).
how can i remove hover of headings??
FIDDLE
you can use
.footer_ul li.bold1:hover {
font-size:14px;
text-decoration:none;
}
to remove the hover of headings
updated jsFiddle File
or alternate you can use .footer_ul li a:hover instate of .footer_ul li:hover
.footer_ul li a:hover {
text-decoration:underline;
font-size:16px;
}
jsFiddle
I checked you fiddle it was good.
The only change you need to make is you have to add :hover class for a tag and not li tag
`
.footer_ul li a:hover {
text-decoration:underline;
font-size:16px;
}
`
Use :not() selector. A single change is required like so.
.footer_ul li:hover:not(.bold1) {
text-decoration:underline;
font-size:16px;
}
Working demo
Add this css after ".footer_ul li:hover"
.footer_ul li:hover:first-child {
text-decoration:none;
font-size:14px;
}
I have a simple navigation with a sub-menu on one of my main navigation items. When the user hovers over this i would like the sub-menu item to show and when you go onto the sub-menu li items the main menu link to still have the background colour 'hovered' state still active. Thing is i cant even get the sub-menu item to show!
I have tried the usual display:none and when :hovered { display:block}; but it's ignoring it.
What am u missing? Must be something so simple but cannot see in the css styling.
Here is a link to an example of how it is setup: http://jsfiddle.net/ULSsa/
here is the demo link http://jsfiddle.net/ULSsa/6/ with corrected css
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
ul#nav-1 {
width:60%;
height:46px;
border:1px solid red;
}
ul#nav-1 li {
position:relative;
display:inline-block;
*float:left;
margin-top:16px;
margin-left:-4px;
}
ul#nav-1 li a {
padding:22px 13px;
font-size:14px;
}
ul#nav-1 li:hover a,
ul#nav-1 li a:hover {
cursor:pointer;
background-color:#000;
}
ul#nav-1 li ul#sub-menu {
display:none;
position:absolute;
width:200px;
list-style:none;
left:0;
top:19px;
}
ul#nav-1 li:hover ul#sub-menu {
display:block !important;
}
ul#nav-1 ul#sub-menu li {
float: none;
margin: 0;
}
ul#nav-1 ul#sub-menu li a {
border-bottom:1px solid #dbddd4;
background-color:#f2f2f2;
width:200px;
text-align:left;
display: block;
padding:0;
padding-left:18px;
padding-top:13px;
padding-bottom:13px;
float:left;
margin:0;
}
ul#nav-1 ul#sub-menu li:hover a {
background-color:#3a3a3a;
color:#FFF;
}
Pretty easy. The submenu ul#sub-menu is not a child of the anchor element, but of the list element. You must either put the submenu inside the anchor element or check for the hover on the list element as following:
ul#nav-1 li:hover > ul#sub-menu { instead of ul#nav-1 li a:hover > ul#sub-menu {
http://jsfiddle.net/ULSsa/2/
You are using wrong selector here, it should be
ul#nav-1 li a:hover + ul#sub-menu { /* Note the + sign instead of > */
display:block !important;
}
Demo
Explanation: You are using > which will select direct child elements of a which in your case are none, so you need to use + adjacent selector to trigger the adjacent element
Just change your ul#nav-1 li a:hover > ul#sub-menu to ul#nav-1 li:hover > ul#sub-menu because the submenu it is a child of li and not of an anchor (a).
See the example by clicking here.
If you do not know, the CSS > selector means the specifically child of the element.
Updated
To maintain the link state, just do this:
ul#nav-1 li:hover a {
background-color: black;
}
See the example by clicking here.
I'm having a problem getting a pseudo class working with my code. The code in question is a horizontal ordered list that's being placed at the top of a slider. The list is stretched out to fill the full horizontal width of the slider. I put a left-border on each of the list elements by assigning a border to the links contained within the list elements (so that the border didn't make the list too wide).
But I wanted to remove the first link's left-border so that borders were only shown between each list element, and not on the first or last list element.
The problem arises though when I add a first-child pseudo class to the link. The pseudo class seems to assign the class to all of the links.
Here's what I have:
CSS
ol.bjqs-markers{
display:inline-block;
list-style:none;
margin:0;
padding:0;
z-index:9999;
width:100%;
position:absolute;
top:0px;
}
ol.bjqs-markers li{
display:inline;
float:left;
height:30px;
width:20%;
background:rgba(0,0,0,0.7);
float:left;
margin:0 0px;
}
ol.bjqs-markers li a{
display:block;
font-size:22px;
color:#FFF;
text-align:center;
text-decoration:none;
height:100%;
display:block;
overflow:hidden;
border-left:1px solid #F00;
}
ol.bjqs-markers li a:first-child{
border-left:none;
}
And HTML:
<ol class="bjqs-markers">
<li class="active-marker">Example</li>
<li class="">Example</li>
<li class="">Example</li>
<li class="">Example</li>
<li class="">Example</li>
</ol>
Can someone point me in the direction of why that a:first-child applies a border of "none" to all the tags?
Thanks guys!
:first-child works just like expected, but every A in your example is a first-child. It is the first child of its parent LI.
What you're looking for is this:
ol.bjqs-markers li:first-child a {}
It is because you apply this pseudo class to first link in li element. Use
ol.bjqs-markers a:first-child {
border-left:none;
}
Or
ol.bjqs-markers li:first-child a {
border-left:none;
}
maybe you want to do
ol.bjqs-markers li:first-child a{
It it because you are applying the border to the first <a> tag in each <li> tag. Try this instead:
ol.bjqs-markers li:first-child a { }