Hi I am new to html and css and I would like to display a text on the right side when I hover the mouse over another text which is on the left side. I have a list of texts displayed on the left side here is the cod for it
<ul>
<li id="what">What Is Eco Flash?</li>
<br>
<li id="water">We Coneserve Water!</li>
<br>
<li id="chemicals">Chemicals Reduction!</a>
</li>
<br>
<li id="waste">No Waste-Water Run Off</li>
</ul>
and this is my css code for the list to be displayed on the left side
width:25%;
text-align: left;
font-family: 'Copperplate Gothic Light';
font-size: 20px;
font-style: normal;
font-variant: small-caps;
font-weight: bold;
text-decoration: none;
margin:.2em;
display: list-item;
now that I want to add is a small explanation text for each item in the list to appear on the right side when I hover over them.
I am new to the html and css and I have tried spam but it appears right under the text. How can I get the explanation text to appear on the right?
Thanks!
I like to use :hover on the parent and then display the child node like this:
Fiddle
ul li .description{
display: none;
}
ul li:hover .description{
display: inline;
}
<ul>
<li id="what">What Is Eco Flash? <span class="description">Boom a description</span></li>
<li id="water">We Coneserve Water! <span class="description">Boom a description again</span></li>
<li id="chemicals">Chemicals Reduction!</li>
<li id="waste">No Waste-Water Run Off</li>
</ul>
If you don't want to add extra markup to your list elements, you could use a data- attribute and the :after pseudo-class in CSS. I realize this may be a bit more advanced that what you're looking for, but it might be good for future visitors:
li:hover:after {
content: attr(data-explanation);
margin-left: 1em;
}
<ul>
<li id="what" data-explanation="My explanation">What Is Eco Flash?</li>
<li id="water">We Coneserve Water!</li>
<li id="chemicals">Chemicals Reduction!</li>
<li id="waste">No Waste-Water Run Off</li>
</ul>
You could add a new element to the li:
<li id="water">
We Coneserve Water!
<small>Explanation...</small>
</li>
Which is hidden by default:
li small{
display:none;
}
Then display it when the li is hovered over:
li:hover small{
display:inline;
}
Related
i am a newbie to CSS,HTML and trying to understand lists.however something confuses me .As you can see below my HTML i am trying to create a drop down navigation bar.what i don't understand is why would display property won't work on a single li element.
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}
.hidden {display:none;}
.home:hover .hidden{display:block;}
.hidden a:hover{background-color: #f1f1f1;}
<body>
<ul class="block1">
<li class="home">Home
<li class="hidden">
contact us
</li>
<li>about<li>
<li>Investor</li>
<li> what we do</li>
</li>
</ul>
</body>
Here is the new css you should use:
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}
.hidden{display:none;}
.home:hover + .hidden{display:block;}
li:hover{background-color: #f1f1f1;}
Then your html should look like this:
<body>
<ul class="block1">
<li class="home">Home</li>
<li class="hidden" >
contact us
</li>
<li>about</li>
<li>Investor</li>
<li> what we do</li>
</ul>
</body>
Nothing too wrong with your html, just a mismatch <li>, and the css you want to look at this post: Using only CSS, show div on hover over <a>
Here is the JSFiddle: Example of OP Code
i don't understand is why would display property won't work on a
single li element.
The div with class .home is not the parent of li tag with class hidden. Hence it will never trigger a hover over that. Whenever you trigger a hover over a parent container it trickles down and find its children and does some sort of styling.
In your case, you are trying to use display:none to hide a li and make it display by means of hover.
Consider the snippet below, whenever you hover over the parent container, the li tag is being displayed. (This approach below does not make a drop down menu for you but it is give you some insight how to make that display property change on hover)
.block1 {
background-color: #736570;
margin: 0px;
}
ul a {
color: white;
}
ul li {
list-style-type: none;
padding: 5px;
}
.hidden {
display: none;
}
.block1:hover .hidden {
display: block;
}
.hidden a:hover {
background-color: #f1f1f1;
}
.home
<html>
<body>
<ul class="block1">
<li class="home">Home
<li class="hidden">
contact us
</li>
<li>about
<li>
<li>Investor</li>
<li> what we do</li>
</li>
</ul>
</body>
</html>
What I'm trying...
I'm trying to make a menu with a hover effect. If you hover a link, it's background-color should change. If you go to the next one, it should change smoothly to the next link.
Problem
When you hover over one link and then go to the next one, there is a small gap between the elements. If your mouse is at that exact spot, nothing happens.
Working Example
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 21px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}
<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>
Not Working Example
.menu-item {
list-style: none;
float: left;
text-transform: uppercase;
font-size: 20px;
line-height: 30px;
}
a {
padding: 20px;
}
a:hover {
background-color: green;
}
<div id="menu">
<ul class="menu-list">
<li class="menu-item"><a href='#'>Menü #1</a></li>
<li class="menu-item"><a href='#'>Menü #2</a></li>
<li class="menu-item"><a href='#'>Menü #3</a></li>
</ul>
</div>
My observation
If you change the font-size just by one pixel, it works. If I use IE it works in both examples, but in Chrome only the Working One works :D
What I'm asking for...
Is this a Chrome bug or is there a possibility to make the 'not working one' work.
It's actually an interesting question. The "issue" is caused by the browser CSS that is reading the display:inline; of the a tag, and not having it fill the entire display:block; of the li tag.
You can fix this by using the following CSS rule
.menu-item a {
display:block;
}
Add display: block to the links. The link is smaller than the li
Remove the font-size and line-height from the menu-item, style the link directly. This behaviour most likely comes from rounding errors.
I'm a newbie to html and trying to figure it out through online tutorials. I have a menubar that goes horizontally across the top of the page. Right now I have the menubar in a div tag, and within the contents, I have
<nav>
<li>
<a id="l1" href="whatever.com/about/">About</a>
<a id="l2" href="whatever.com/content/">Content</a>
<a id="l3" href="whatever.com/history/">History</a>
<a id="l4" href="whatever.com/Team/">Team</a>
</li>
</nav>
I want to position the links and change the font, and I was under the impression that I would do so using a format along the lines of:
<style>
.l1
{
position:relative;
top:5px;
right:30px;
}
</style>
However, that does not seem to be working, and I can't find any helpful tutorials. Can anyone give me advice on how to appropriately format & style my links?
The dot notation you've used in CSS is for classes, not IDs, this should work:
<nav>
<ul>
<li><a class="l1" href="whatever.com/about/">About</a></li>
<li><a class="l2" href="whatever.com/content/">Content</a></li>
<li><a class="l3" href="whatever.com/history/">History</a></li>
<li><a class="l4" href="yabidu.com/Team/">Team</a></li>
</ul>
</nav>
ID's id="foo" on an element are accessed in CSS with #foo, also they supposed to be completely unique, therefore no element IDs on a page should be the same. Classes on the other hand class="bar" are allowed to be used multiple times and are access in CSS using .bar.
You've also used invalid syntax, <li> (list items) are always supposed to be directly inside either <ul> (unordered list) or <ol> (ordered list), I have fixed your markup for you as well.
Your HTML5 systax is wrong..
<nav>
<ul>
<li><a href="#">LINK<a></li>
.....
</ul>
</nav>
and to aceess the li element, use
nav ul li a {
font-size:20px;
font-weight:bold;
position:relative;
top:XX;
left:XX;
}
Solution 1:
HTML:
<nav>
About
Content
History
Team
</nav>
CSS:
nav a {
float: left;
padding: 0 20px;
}
DEMO 1
Solution 2:
HTML:
<nav>
<ul>
<li>
About
</li>
<li>
Content
</li>
<li>
History
</li>
<li>
Team
</li>
</ul>
</nav>
CSS:
nav ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
nav ul li {
float: left;
padding: 0 20px;
list-style: none;
}
DEMO 2
Element li not allowed as child of element nav in this context.
Contexts in which element li may be used:
inside ol elements.
inside ul elements.
inside menu elements
HTML:
<nav>
<ul>
<li>About</li>
<li>Content</li>
<li>History</li>
<li>Team</li>
</ul>
</nav>
Don't use id's for styling elements (Use only where it is necessary).
Use css selectors:
nav ul li a { ... }
or if you interested to style only childs a in li element:
nav li > a { ... }
For display li elements inline you must add next style
nav li {
display: inline-block;
*display: inline; // fix for ie7
}
or float:left instead display:inline-block;
If you could kindly hover your mouse over the MORE button in the menu here: http://jsfiddle.net/H8FVE/7/
You will see that there is a list containing the words Random text here. I tried to style that list but somehow the styling of the drop down menu prevents me from doing it. The style I used for the list is:
#trendcontainer {
margin-top: 0px;
padding-bottom: 1px;
}
#trend { width: 188px; }
#trend ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#trend film
{
display: block;
padding: 3px;
width: 188px;
background-color: #B40404;
border-bottom: 1px solid #eee;
text-align: center;
letter-spacing: 0.4px;
color: #FAFAFA;
}
Here is part of the HTML:
<div id="second-menu" class="clearfix">
<ul id="secondary-menu" class="nav sf-js-enabled">
<li class="manimation">Animation</li>
</ul>
<ul id="mega">
<li class="dif mmore" style="background:none;">More...
<div>
<moretopbar>
<ul>
<li class="mgames">Games</li>
<li class="mliterature">Literature</li>
<li class="marts">Arts</li>
<li class="mcontact" style="background:none;">Contact</li>
</ul>
</moretopbar>
<morecontainer>
<moreleftbar>
<trendcontainer>
<trend>
<ul>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
</ul>
</trend>
</trendcontainer>
</moreleftbar>
</morecontainer>
</div>
</li>
</ul>
</div> <!-- end #second-menu -->
Although, I would advice overlooking the fiddle for a visual presentation of the issue: http://jsfiddle.net/H8FVE/7/
Can you figure out how to fix the styling? If you choose to answer, please be detailed as my coding knowledge is limited - ideally with an updated fiddle.
I just updated it. http://jsfiddle.net/H8FVE/11/
I added a class called .random in the css code and class="random" into the ul element you aimed to modify.
in the css I added the following code, although you may change it to fill your purposes. (if you want to style only the ul, change it to .random { }
.random li {
font-weight:bold;
}
I need to change something without touching HTML codes.
So I have this code in my HTML
<span class="share">
<ul>
<li>Share </li>
<li class="twitter">twitter</li>
<li class="facebook">facebook</li>
<li class="delicious">delicious</li>
<li class="friendfeed">friendfeed</li>
<li class="addthis">share</li>
<div class="clear"></div>
</ul>
</span>
and this in CSS
.twitter {
background: url('../images/tt.png') no-repeat;
width: 10px;
height: 14px;
}
This works fine, but twitter text is visible under the twitter logo, I don't want those texts to appear in my list, I want to replace them with images in CSS.
Is it possible to do without touching HTML Codes?
Make the text transparent. Since it's a link, you'll want to use a few selectors to make sure all cases are addressed:
.twitter a, .twitter a:link, .twitter a:visited
{
color: transparent;
}
Edit: This other option, while more verbose, has the benefit of keeping the focus border (the little dots that appear when a link is selected) to the size and shape of the twitter icon. Also, the text will not be revealed if selected and copied and pasted. It becomes invisible and unselectable. Here is the technique:
.twitter a {
display: inline-block;
overflow: hidden;
width: 0;
height: 14px;
padding-left: 10px;
}
You could use text-indent:
text-indent: -9999px; /* get rid of any text */
Try making your font-size : 0px; in your css.
use text-indent with a little magic in it :)
HTML:
<span class="share">
<ul>
<li>Share </li>
<li class="twitter">twitter</li>
<li class="facebook">facebook</li>
<li class="delicious">delicious</li>
<li class="friendfeed">friendfeed</li>
<li class="addthis">share</li>
<div class="clear"></div>
</ul>
</span>
CSS:
a.twitter {
background-image:url('../images/tt.png');
display:block;
height:58px;
text-indent:-9999px;
width:200px;
}
So you see the text is indented but still the image is still clickable because i've put a class in the twitter link ;)