On the page biztone.co, in the left sidebar, I am trying to display social share links in a div(.item .details .post-meta), when the main div(#sidebar .recent-post-thumb li) is hovered. I've kind of got it working, except the div(.item .details .post-meta) appears in the box below the hovered box.
Here's the css script I have added to get it to work. But, I need help figuring out why it's displaying in the box below and not the box being hovered..?
.item .details .post-meta { display:none; }
sidebar .recent-post-thumb li:first-child:hover + .item .details .post-meta {
display:block; }
sidebar .recent-post-thumb li:hover + .item .details .post-meta {
display:block; }
Any help is greatly appreciated and will teach me something new.
#sidebar .popular-post-thumb li:hover .post-meta is what you need for a selector instead of going to the next dom element with the +
Change sidebar .recent-post-thumb li:hover + .item .details .post-meta to
#sidebar .popular-post-thumb li:hover .post-meta
It's because of the + sign: it targets the next element.
Remove it and it will target the .post-meta element inside the currently hovered li.
Related
I want to change the color of the parent and the sub parent category into two different colours. Currently using the following code for my widget side tab.
.widget ul {background: gray;padding-top: 1px;}
.widget ul li {background:lightgray;margin: 1px;}
.widget ul a{background-color:darkgray;padding:1px;}
looking to change the font colour. I have tried many options but still not getting it right.
Try this:
.widget ul li.parent > a {
color: red !important;
}
It's hard to say without seeing your HTML structure, but are each of the sub-parent links ('Access Control', 'Electronic locks', etc) their own ul tags?
If so, could you not target each of their first li's like this:
.widget ul > li:first-of-type > a {
color: red;
/* INSERT STYLES */
}
This would target all uls' first li > a elements, as in the image on the right.
I am trying to style my responsive nav drop-down menu and change the background color but can't seem to figure it out. I would like the items in the list below to have a gray background of #cccccc.
the full site is located here:
http://adanburlington.com/giotto2/index.html
HTML:
<ul class="nav hidden">
<li>Fire Alarm Systems</li>
<li>Security & Intrusion</li>
<li>Closed Circuit TV</li>
<li>Access Control</li>
<li>Systems Integration</li>
</ul>
Responsive CSS:
#media screen and (max-width : 1100px){
ul.nav
{ position: static;
display: none;}
li.nav {margin-bottom: 1px;}
ul.nav li, li.nav a {width: 100%;}
.show-menu {display:block;}
li.nav > ul.hidden {
display: block !important;
}
}
I don't see where you are trying to set it in the CSS you listed in your question.
I would think
ul.nav.hidden li a {
background-color: #cccccc;
}
would do it if you don't have another statement for this that counteracts it. If you do, add another class to the ul so you can make your selector specific to this instance.
If your li has padding, either drop the "a" off the selector or add "ul.nav.hidden li" as a second selector.
Btw, you have "li.nav" a few places. For this section of html, at least, your lis don't have the class "nav" but are instead inside an element with class "nav", so it should be ".nav li" if you are trying to target those. ;-)
ul li {
background-color: #cccccc;
}
I would like my sub menu items to show up when both the parent is active and the current menu or any other child of that parent is active on my wordpress website. I got it so that the two children show up when the parent is active, but they go away when you click on any of the children
Example: https://vfcasino.com/dining/fine-dining/
Viviano and Pacific Prime show up when you're on the Fine Dining page, but then go away when you click on the parent page. I don't want them to appear if you are on Casual Dining or Bars & Lounges. I want them to appear on Fine Dining, Viviano or Pacific Prime.
Here is the css I am using:
#sidebar .widget.widget_nav_menu ul li ul{
display:none;
}
#sidebar .widget.widget_nav_menu li.current_page_item > ul,
#sidebar .widget_nav_menu li.current-menu-ancestor > ul ,
.widget.widget_nav_menu li.current_page_item > ul,
.widget_nav_menu li.current-menu-ancestor > ul
{display:block; padding-left:20px; padding-bottom: 10px;}
I have tried manipulating the css, but I just cant get it to work.
If I understood correctly, this should work:
#sidebar .widget_nav_menu .current-page-ancestor > .sub-menu {
display: block;
padding-left: 20px;
padding-bottom: 10px;
}
You just need to override this selector with more precise selector for the sub-menu:
#sidebar .widget.widget_nav_menu ul li ul {
display: none;
}
I am trying to create a navigation menu and I would like my first <li> to line up perfectly with the container above it but I need some spacing to the right of the first <li> so I'm trying to do something like:
nav .innercontainer ul li:nth-of-type(2n+1){ /*only happen after the first <li>*/
margin-left:20px;
}
Thanks these pseudo select elements are confusing as hell.
The easiest way to do this is with the + selector:
ul > li + li{
/* all li elements except the first */
}
nav .innercontainer ul li{
margin-left:20px;
}
nav .innercontainer ul li:first{
margin-left:0;
}
if i get it right, its simple this way
I have a menu:
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
Thanks in advance for any advice/help/suggestions.
From what I gather you cannot do what you are after in the way you have described it.
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
li a {
background:#000 url(images/bg.png) no-repeat 0 0;
display:block;
height:20px;
width:100px;
}
li a:hover {
background:#fff url(images/bg.png) no-repeat 0 -20px;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
You can do this simply with:
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
#menu ul li a:hover{
background-image:url(newimage);
}
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...