How can I change another class's property when one's hovering.
If I say I have A and B class, A has hover event, If I want to change inside of B when A hover, how can I do?
A:hover {}
B{ color:#FFF; }
A:hover + B{ color:#000; } didnt work
Actually CSS
.has_child is inside of .navi
.navi > ul > li:hover
+ .navi > ul > li > .has_child:after {
color: #09F;
}
HTML
<nav class="navi ">
<ul>
<li style="height:8px; width:8px; padding:0px; margin:0px;">
</li>
<li>
General Config
</li>
<li>
Menu
<ul>
<li style="height:8px; width:8px; padding:0px; margin:0px;">
</li>
<li>
English
</li>
<li>
</li>
</ul>
</li>
<li>
User Level
</li>
<li>
User
</li>
<li>
Tag
</li>
<li>
Log
</li>
<li>
</li>
</ul>
</nav>
Thank you very much for your advice.
==============
Update
Seem like + operator will nor work if have > before.
A:hover + B{ color:#000; } will work fine.
A:hover + C > B{ color:#000; } will not work.
Works for me.
You should check your selectors. What browser are you using?
.A must be inside .B
<div class="A">
<div class="B">
something
</div>
</div>
then in your stylesheet:
.A:hover .B { some css code }
Related
The HTML and CSS code is as follows;
I am using li ul as selectors to make my subjects hidden but it's not working
and I don't know why. Can some one please help (I am new to programming)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
<li> Chemistry Of Biomolecules </li>
<ul>
<li><a> new</a> </li>
<li><a> new</a> </li>
<li><a> new </a></li>
</ul>
</ul>
</div>
li ul {
visibility: hidden;
position: absolute;
width: 150px;
}
li:hover ul {
visibility: visible;
}
I think that is what you want
Edit
Also you have error in your HTTML. Your HTML should be like bellow. (Modifying your HTML according your CSS. But this not means that you must write HTML in this way)
<div id="subjects">
<h3> SUBJECTS </h3>
<ul class="subjects">
<li> Introduction To Biochemistry
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
<li> Chemistry Of Biomolecules
<ul>
<li><a>new</a> </li>
<li><a>new</a> </li>
<li><a>new</a></li>
</ul>
</li>
</ul>
</div>
CSS
li ul{
display:none;
position:absolute;
width:150px;
}
li:hover ul{
display: block;
}
You're selecting al ul tags in li tags, but your HTML is the other way around.
If you change your CSS to ul li { css_here } it should work.
Also when position: absolute; is set to the li items, the ul item doesn't wrap the items anymore, because they are removed from the document layout flow. So you might want to remove the position: absolute;.
I have a little problem with my vertical navigation:
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
...
</div>
My CSS:
.menu-container a{
text-decoration:none;
color:black;
}
.menu-container a:hover{
font-weight:bold;
}
.menu-container li:hover > .sub-menu{
display:block;
}
.sub-menu{
display:none;
list-style-type:none;
padding:6px;
}
ul.sub-menu a{
text-decoration:none;
}
.menu-container > ul.sub-menu a{
display:block;
background:#ddd;
}
.menu-container > .sub-menu:active{
display:block;
background:#ddd;
}
If I hover the menu the sub-menu show up. Now, in addition I would like, that if e.g. the submenu1 is active that the whole submenu stays openend. Can I realize that with CSS?
Greets,
Yab86
Here's an example using PHP. You need to create a page variable before the <html> like this:
<?php $page = 'menu1'; ?>
<html>
<!-- rest of HTML below here-->
That php code gets put on top of every submenu page that shares a common main parent menu. So in your example, submenu1, submenu2, and submenu3 would have the same variable. In this example, menu1. What this does, is allows you to add a CSS class of current to the submenu parent ul.
Here's the HTML with the PHP in place:
<?php $page = "menu1"?>
<html>
<head></head>
<body>
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu <?php if($page == 'menu1')echo 'current'; ?>">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2
<ul class="sub-menu <?php if($page == 'menu2')echo 'current'; ?>">
<li>Submenu4</li>
<li>Submenu5</li>
<li>Submenu6</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
And here's the CSS that would keep it open:
.menu-container li:hover > .sub-menu,
.menu-container .current {
display:block;
}
When the HTML outputs to the browser, this is what it would actually look like if you were on any of the submenu1,2,3 pages:
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu current">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2
<ul class="sub-menu">
<li>Submenu4</li>
<li>Submenu5</li>
<li>Submenu6</li>
</ul>
</li>
</ul>
</div>
Hopefully this helps you out.
SO I am trying to create a hidden drop down menu and I want only the outer li to have specific css elements. Want I want to know if you can use multiple child selectors, > , so I can apply to the links within those li 's and not have applied to the links in the smaller menus
For example:
<ul class="top">
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
<li>
random
<ul class="second">
<li>
random second
</li>
</ul>
</li>
and a css element would be:
ul.top > li > a {
color: red;
}
whereas I would want the a in ul.second to, a random example, have color: blue
If you want to target the "outer" links, you should do just as you wrote:
ul.top > li > a {
color: red;
}
If you want to target the "inner" links, just use any of the following selectors:
ul.top ul a {
color: green;
}
or
ul.second > li > a {
color: green;
}
this is my html code:-
<div id="load">
<ul>
<li>Activities
<div>
<ul>
<li>Physical1
<div>
<ul>
<li>Cricket
<div>
<ul>
<li>One Day</li>
</ul>
</li>
</ul>
</li>
<li>Test1
<div>
<ul>
<li>Test At Abc</li>
</ul>
</li>
<li>Test2
<div>
<ul>
<li>Test At Xyz</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
this is my css:-
li{
color:red;
border-left:1px solid green;
}
li{
list-style:none;
}
ul > li > div > ul {
display: none; // hide all submenus
}
li:hover > div > ul {
display: block; // show sub menu when parent li is hovered
}
now i want to something this type of my list:-
i think using proper position css style its done.
or with float i think its possible.
any kind help well come...
thanks...
I have this Navbar and I and I want that when a anchor is clicked it get's underlined using CSS:
<div id="nav">
<a data-field="home" class="nav-menu">Homepage</a> <span>|</span>
<a data-field="about" class="nav-menu">About us</a> <span>|</span>
<a data-field="support" class="nav-menu">Support</a> <span>|</span>
<a data-field="contact" class="nav-menu">Contact</a>
</div>
Also how can I make the same thing with a list:
<ul>
<li><a data-field="home" id="homelink" class="tray-menu" id="tray-active" >Homepage</a></li>
<li><a data-field="news" id="newslink" class="tray-menu">News</a></li>
<li><a data-field="products" id="productslink" class="tray-menu">Products</a></li>
<li><a data-field="sales" id="saleslink" class="tray-menu">General Sales T&C</a></li>
<li><a data-field="job" id="jobslink" class="tray-menu">Job Opportunities</a></li>
</ul>
In this case, this case how do I make a <li> element get a specific "selected" css style while the other <li> in the gets grayed out or something?
In Javascript its easy, just manipulate the DOM and set the id or class tag.
Update:
Basically, I have this working, but with using Java (GWT); However I want to know if this is possible to do using just plain CSS and HTML
If you want this effect on the whole page use:
a:link
{
text-decoration:none;
color:#000;
}
a:visited
{
text-decoration:none;
color:#000;
}
a:hover
{
text-decoration:none;
color:#008F68;
}
a:active
{
text-decoration:underline;
color:#000;
}
Or for just the Navigation use the same but put 'li' in front of everything.
The 'Active' attribute' of the CSS is the one that is called upon click.
Sounds like the :target pseudo selector might do the trick. (*See http://css-tricks.com/on-target/ ) (Will not work in older versions of IE)
HTML
<ul>
<li id="homelink">Homepage </li>
<li id="newslink">News</li>
<li id="productslink">Products</li>
<li id="saleslink">General Sales T&C</li>
<li id="jobslink">Job Opportunities</li>
</ul>
CSS
:target {
text-decoration: underline;
color: red;
}
for "a" links (the below lines applies for all links in the page)
a:active
{
text-decoration:underline;
color:red;
}
for second issue give a classname to ul like myul
<ul class="myul">
.myul li {
background-color:red;
}
.myul li.selected {
background-color:blue;
}