I am implementing style for hyperlink (a and a:hover) but the browser consider the first "a style) only and completely ignore the "a:hover) style, and it works fine when I remove the "a style". I don't know why it has conflict, as I am doing the same thing explained on websites and books.
Here is my HTML code:
<nav class="vertical">
<h4>Course Outline</h4>
<ol>
<li>The Course of War
<ol>
<li>1861-1862</li>
<li>1863</li>
<li>1864-1865</li>
</ol>
</li>
<li>Aftermath
<ol>
<li>Lincoln Assassination</li>
<li>Reconstruction</li>
<li>A New Constitution</li>
<li>The United States Is ...</li>
</ol>
</li>
</ol>
</nav>
And here is the CSS
nav.vertical a:hover {
text-decoration:uderline;
color: hsla(212%,100%,29%,1);
}
nav.vertical a {
color: hsla(212%,100%,29%,0.6);
text-decoration:none;
}
I went through all the posts regarding this issue here, but still couldn't fix it.
hsla(212%,100%,29%,1);
should be
hsla(212,100%,29%,1); /* h = HUE and it's a 0-360 degrees value (not %) */
also
uderline
should be
underline
nav.vertical a:hover {
text-decoration:underline;
color: hsla(212,100%,29%,1);
}
nav.vertical a {
color: hsla(212,100%,29%,0.6);
text-decoration:none;
}
<nav class="vertical">
<h4>Course Outline</h4>
<ol>
<li>The Course of War
<ol>
<li>1861-1862</li>
<li>1863</li>
<li>1864-1865</li>
</ol>
</li>
<li>Aftermath
<ol>
<li>Lincoln Assassination</li>
<li>Reconstruction</li>
<li>A New Constitution</li>
<li>The United States Is ...</li>
</ol>
</li>
</ol>
</nav>
Related
I am looking to create an alphabetized numbered list (which is fairly easy), however I am looking to add a break in the numbers for a place to add the letters (A, B, C, etc) however keep the chronology of the numbers.
I know that I could do the numbering myself and have no issue, however I want the numbers to automatically adjust as I add items. Hopefully someone can tell me how to do this in HTML.
Essentially this is what I would like it to look like:
A
Air Force One
Aladdin
Amazing Spider-Man
B
Back to the Future
Batman Returns
Beverly Hills Cop
C
Club Paradise
You can use the start attribute of the ol tag, like this:
<h2>A</h2>
<ol>
<li>Air Force One</li>
<li>Aladdin</li>
<li>Amazing Spider-Man</li>
</ol>
<h2>B</h2>
<ol start="4">
<li>Back to the Future</li>
<li>Batman Returns</li>
<li>Beverly Hills Cop</li>
</ol>
<h2>C</h2>
<ol start="7">
<li>Club Paradise</li>
</ol>
following code should do the trick without JS:
ol.start {
counter-reset: mycounter;
}
ol.start li, ol.continue li {
list-style: none;
}
ol.start li:before, ol.continue li:before {
content: counter(mycounter) ") ";
counter-increment: mycounter;
position:relative;
text-align: right;
width:25px;
display:block;
float:left;
left:-30px;
}
<ol type="A">
<li></li>
<ol class='start'>
<li>2nd line</li>
<li>2nd line</li>
<li>2nd line</li>
<li>2nd line</li>
</ol>
<li></li>
<ol class='continue'>
<li>2nd line</li>
<li>2nd line</li>
<li>2nd line</li>
</ol>
<li></li>
<ol class='continue'>
<li>2nd line</li>
<li>2nd line</li>
<li>2nd line</li>
</ol>
</ol>
Try this
var entityAlpha = 65;
$('li').each(function(i,e){
if(i%3 === 0){
$(this).css('position', 'relative');
$(this).append('<span class="alpha">&#'+entityAlpha+';</span>');
entityAlpha = entityAlpha+1;
}
});
/* Put your css in here */
ol li:nth-child(3n){
margin-bottom:40px;
}
.alpha{
left:-25px;
top:-30px;
position:absolute;
font-weight: bold;
}
ol{
margin-top:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<ol>
<li> Air Force One</li>
<li>Aladdin</li>
<li>Amazing Spider-Man</li>
<li>Back to the Future</li>
<li>Batman Returns</li>
<li>Beverly Hills Cop</li>
<li>Club Paradise</li>
</ol>
I have the following list on my html file: I need to know how I can make the Headings: The Road To War; Politicians and Generals; The Course of war; and Afermath in Upper-Roman and the subheadings under each one in Upper-Alpha, within my css file.
<nav class="vertical">
<h4>Course Outline</h4>
<ol>
<li>The Road to War
<ol>
<li>Planting the Seeds</li>
<li>The First Crisis</li>
<li>Compromise & Failure</li>
<li>Fault Lines</li>
</ol>
</li>
<li>Politicians & Generals
<ol>
<li>Politicians</li>
<li>Generals</li>
</ol>
</li>
<li>The Course of War
<ol>
<li>1861-1862</li>
<li>1863</li>
<li>1864-1865</li>
</ol>
</li>
<li>Aftermath
<ol>
<li>Lincoln Assassination</li>
<li>Reconstruction</li>
<li>A New Constitution</li>
<li>The United States Is ...</li>
</ol>
</li>
</ol>
</nav>
Add a class to the ol you want to make it Upper-alpha for example <ol class="alpha"> and then in css:
.alpha {
list-style-type: upper-alpha;
}
Give each of them classes and do like this
for upper roman
ol{
list-style-type: upper-roman;
}
for upper alpha
ol{
list-style-type: upper-alpha;
}
I have a nested list:
li:hover {
background-color: lightgray;
}
ul li ul li:hover {
font-weight: bold;
}
<ul>
<li>fnord
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
<li>gnarf
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>yolo</li>
</ul>
</li>
</ul>
</li>
</ul>
Problem is, hovering "foo" will also hover "fnord" and all of its li elements. How do I hover only the li my mouse is actually hovering over?
The nesting is variable and can, in theory, be endless.
I have setup a JSFiddle.
A solution for subitems and also for parents is possible without JavaScript, when you will add some inline element, which will trigger hover state.
li>span:hover {
background-color: lightgray;
font-weight: bold;
}
<ul>
<li><span>fnord</span>
<ul>
<li><span>baz</span></li>
<li><span>foo</span>
<ul>
<li><span>baz</span></li>
<li><span>foo</span></li>
</ul>
</li>
</ul>
</li>
</ul>
JSFiddle here.
I believe the closest you can get with just CSS is to remove the hover styling from the children of the hovered elements... which doesn't help the parents.
li:hover {
background-color: lightgray;
}
li:hover {
font-weight: bold;
}
li:hover ul {
background-color: white;
font-weight: normal;
}
<ul>
<li>fnord
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
<li>gnarf
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
</ul>
JSFiddle
The accepted answer on the duplicate you found is the best way I've seen to do this with JavaScript, using e.stopPropagation: Cascading <li>-hover effect using CSS. You'll want to be more specific than 'all lis' in that selector though:
$('li').mouseover(function(e)
{
e.stopPropagation();
$(this).addClass('currentHover');
});
$('li').mouseout(function()
{
$(this).removeClass('currentHover');
});
.currentHover {
background-color: red;
}
li.currentHover ul {
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="container">
<li>fnord
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
<li>gnarf
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
</ul>
JSFiddle of the answer from there.
So you just want to directly target an li? Try this:
ul li ul li:hover{
background-color: red;
}
Demo here
Edit
I also added another EXAMPLE of where the menu could indeed keep on expanding.
Use this selector to hover
ul ul li:hover {}
it can style only element with foo
In 2023 it is now possible with plain CSS and no modification to HTML by using :has() and :not() pseudo-selectors for Chromium-based browsers, but unfortunately :has is not fully supported in Firefox as of January 2023 (users need to opt-in via layout.css.has-selector.enabled flag, and there are relevant features not yet implemented). For up-to-date status see https://caniuse.com/css-has
li:not(:has(li:hover)):hover {
background-color: lightgray;
}
<ul>
<li>fnord
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>foo</li>
</ul>
</li>
</ul>
</li>
<li>gnarf
<ul>
<li>baz</li>
<li>foo
<ul>
<li>baz</li>
<li>yolo</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm struggling with this, I'd like my first li to have a round bullet and then the nested li's to have an indented square bullet. My CSS trying to do this is below, default styling of my page is not putting any bullets in place.
Can someone help?
<ul>
<li>Simplification of a complex purchase category
<ul>
<li>Meet local regulatory compliance </li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
CSS
ul:first-child {
list-style-type:circle;
}
li:first-child {
list-style-type:square;
}
li:nth-child(2) {
list-style-type:square;
}
try this:
li {
list-style-type:circle;
}
li li {
list-style-type:square;
}
you could use classes on your tags to set the list-style-type.
HTML
<ul class="round">
<li>Simplification of a complex purchase category
<ul class="square">
<li>Meet local regulatory compliance </li>
<li>Subitem 2</li>
</ul>
</li>
<li>Final list item</li>
</ul>
CSS:
.round {
list-style-type:bullet;
}
.square {
list-style-type:square;
}
http://jsfiddle.net/8H9JA/
I'm redoing a html table into a list.
It now looks like this:
<ul>
<li>Some fruits
<ul>
<li>2013
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>2012
<ul>
<li>Banana</li>
</ul>
</li>
<li>2011
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>2009
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>
I'm trying to figure out how to make the first entry in the sublist to align horizontally with the year. Like this:
2011 Lemon
Orange
Plum
The nested elements are doing my head in and I'm stuck. I have a feeling this will involve the display type of the elements and some floating. Any ideas? Fiddle here: http://jsfiddle.net/HUH62/4/
Thanks.
If I understood correctly, here's the same fiddle modified according to what you are trying to accomplish: fiddle.
I added some classes in order to make the CSS more readable and wrapped the "subtitle" of each section in a div so that floatiing could be applied to them.
I also removed the colors, since I interpreted they were added only for visualizing the elements.
CSS
h4 {
margin: 0px;
padding: 0px;
float:left;
}
ul {
list-style: none outside none;
padding: 0;
}
ul li ul li ul {
float:left;
margin-left: 10px;
}
ul li {
clear:both;
}
HTML
<ul>
<li>Some fruits
<ul>
<li>
<h4>2013</h4>
<ul>
<li>Apple</li>
<li>Kiwi</li>
</ul>
</li>
</ul>
</li>
<li>Some other fruits
<ul>
<li>
<h4>2012</h4>
<ul>
<li>Banana</li>
</ul>
</li>
<li>
<h4>2011</h4>
<ul>
<li>Lemon</li>
<li>Orange</li>
<li>Plum</li>
</ul>
</li>
<li>
<h4>2009</h4>
<ul>
<li>Peach</li>
<li>Pear</li>
</ul>
</li>
</ul>
</li>
</ul>