I have a simple ul list. the li's contain simple a href's.
I have a background and all that on the li and I want to change the li's border when the a href is mouseover...
Is that possible?
<ul>
<li>Button 1</li>
</ul>
anyway, I need the li border to change on mouseover... this seems simple, but I can't figure it out.
I would make the li the same size as the a tag.
then in your css file:
ul li {
border: 1px solid #000000;/*Black 1px border*/
}
ul li:hover {
border: 2px dotted #ff0000; /*Red 2 pix dotted line border*/
}
Related
Here is my three view, I want the border-bottom not just for <a> text but for all border around the tree and same for hover background-color. here is html code for every li
html
<li ng-repeat="node in node.children" class="treebase"
ng-include="'/_Core/DirectiveCore/Tree/NodeTemplate.html'" ng-show="node.isVisible">
<a ng-click="c.nodeClicked($event , node)" class="treebase ">
<span ng-class="node.currentCssClass" href="node.link"></span>
{{node.text}}
</a>
</li>
css
ul li a {
border-bottom: 1px solid #eeeeee;
}
ul li a.treebase:hover {
text-decoration: none /*!important;*/ ;
cursor: pointer;
background-color: #eeeeee;
display: block;
}
tree
you can put the border on the li element instead if you want it to take full width since the li element is a block.
or you can simply change a to be displayed as block:
ul li a {
border-bottom: 1px solid #eeeeee;
display: block;
}
if a is displayed as block it will take full width inside li tag. as a result the border and background will take the width of li.
I have this sample:
link
CODE HTML:
<ul>
<li>MENIU 1</li>
<li>MENIU 2</li>
<li>MENIU 3</li>
<li>MENIU 4</li>
</ul>
CODE CSS:
ul {list-style-type:none;}
ul li:hover{
border-left:5px solid red;
}
My problem is simple ... when you put the arrow on the menu, the menu item moves a few pixels in right.
How can I prevent it from moving?
EDIT:
Perhaps I did not explain well ... I do not want another rim ... just when you put an item in the list arrow appears red headboard and my text goes in the right
You are adding some space that is not there before, that`s causing the selected item to move right. All you need to do is to add a transparent border, when item is not on hover.
ul {list-style-type:none;}
ul li{border-left:5px solid transparent;}
ul li:hover{border-left:5px solid red;}
Try setting default trasparent border:
ul li {border: 5px solid transparent;}
The menu lis are moving because you are adding a 5px border where there was none before. This increases the size of your overall box and shifts it to the right to make room for the border.
You can cure this by having a 5px border all the time, but make it transparent until hovered, so the 5px is always there and the box won't shift.
Just add a CSS rule for the li when not hovered:
ul li {
border-right: 5px solid transparent;
}
add a transparent border.
ul {list-style-type:none;}
ul li{border-left:5px solid transparent;}
ul li:hover{
border-left:5px solid red;
}
working demo https://jsfiddle.net/geekrose/ebepwj1m/2/
Add a default transparent border to the li's:
ul li{ border-left:5px solid transparent }
Hi now you can used to padding as like this
ul {list-style-type:none;}
ul li{padding-left:5px;}
ul li:hover{
border-left:5px solid red;
padding-left:0;
}
Demo Example
ul {list-style-type:none;}
ul li{padding-left:5px;}
ul li:hover{
border-left:5px solid red;
padding-left:0;
}
<ul>
<li>MENIU 1</li>
<li>MENIU 2</li>
<li>MENIU 3</li>
<li>MENIU 4</li>
</ul>
Add transparent border to the ul li class.
ul li{
border-left: 5px solid transparent;
}
following will be your final css
ul {list-style-type:none; }
ul li{
border-left: 5px solid transparent;
}
ul li:hover{
border-left:5px solid red;
}
Based on w3c the correct way in HTML for a nested list is.
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
However I want a border at the bottom of each item in the list, the following code underlines them all but Tea.
li {
border-bottom: 1px solid purple;
}
Any suggestions?
if you mean border bottom on everything you will need to do something like this:
li {
border-bottom: 1px solid purple;
}
li > ul {
border-top: 1px solid purple;
}
li > ul > li:last-child {
border: none;
}
Example
Alternative
Same length lines (but you'll have to find a way to indent the second level bullets)
Otherwise just use text-dexoration
Maybe you can use
text-decoration: underline
This applies to the text in the element.
Your problem is that the li containing tea actually does have a border, but it's a bottom border, so it is below the nested li.
Instead of using text-decoration you can also wrap the text in another element (span or div) inside the li elements, and apply the border to that. Such a solution using div is especially useful if you want the border to be the full width of the element instead of the text alone.
The "Tea" li DOES have a border it's just 'masked' by the border of the last submenu li
See JSfiddle
li {
border-bottom:3px solid red;
}
li ul li {
border-bottom:3px solid green;
}
As everyone above mentioned that the border actually exists for text "Tea" which is at very bottom because li element has display: list-item assigned by default. You can make it visible by using display: inline but keep in mind that you will lose the features of li element such as list-style-type because they are only applicable for display: list-item.
li {
border-bottom: 1px solid purple;
display: inline;
}
li:after {
content:"";
display: block;
}
Working Fiddle
This problem is caused by the fact that the "Tea" li tag contains not just 'Tea', but every other ul and li tag pair except for the one containing "Milk". The "Tea" li is getting underlined, which is actually appearing under the 'Green Tea' underline (if you look closely, you should notice a double underline there, especially if you add padding to you li tags.) Your best bet in this situation (if you are building the list programmatically) is to wrap the li items in another tag:
<ul>
<li><span>Coffee</div></li>
<li><span>Tea</span>
<ul>
<li><span>Black tea</span></li>
<li><span>Green tea</span></li>
</ul>
</li>
<li><span>Milk<span></li>
</ul>
then change your code to:
li span{
border-bottom: 1px solid purple;
}
This will ensure that the text gets underlined, and not the li tag containing the text.
Edit:=====================
This is the same thing that Mr Green is recommending in his comment
Give it a class add add display: inline-block so:
<ul>
<li>
<ul>
<li class="underline">
Some stuff here
</li>
</ul>
</li>
</ul>
and in your css:
.underline {
display: inline-block;
border-bottom: 1px #CCCCCC solid;
}
There are different ways to solve it, I went with this.
li {
border-bottom: 1px solid purple;
}
li > ul > li:first-child {
border-top: 1px solid purple;
}
li > ul > li:last-child {
border: none;
}
I have implemented my webpage menu by inline li-s of ul. li has a colored border and contains a. Now onmousehover I need to change color of the text inside a and move it 2px up by not moving the li border. How can I do that?
The trick is to remove the top padding a bit and increase the bottom padding a bit to maintain the markup integrity.
I have set up a simple example of what you want. Check it on the fiddle here
The HTML:
<ul>
<li>Home</li>
</ul>
The CSS:
ul { width: 200px; margin: 20px; }
li { border-top: 2px #000 solid; padding: 5px; }
li a { padding: 5px; display: inline-block; }
li:hover a { padding: 3px 5px 7px 5px ; }
Add this to your CSS:
a:hover.jump {
color: [Insert whatever];
position: relative;
bottom: 2px;
}
And then add a class to your link
<ul>
<li>My Link Text</li>
</ul>
You can add background colors or whatever else you need on the hovering text. The cliche-named but pretty useful website CSS Ninja has a bunch of examples
I decided on an effect I would like for a vertical drop down list. Basically, each list element is separated by a 1px grey bar. This effect is easy, apply bottom-border: solid 1px black;
On hover, I want the top and bottom borders of the selected item to become white. Unfortunately, setting the top and bottom borders on the list item element, does not change the bottom border of the list item above it and I end up with the top border staying black and the bottom border becoming white.
Is there a css only way to achieve this effect?
The desired effect is shown here:
This would be a perfect use of the nonexistent previous-sibling selector. Unfortunately, it being nonexistent at all, I'd take a different approach. If you can change the border to be on top, the next-sibling selector will work perfectly:
ul > li:hover, ul > li:hover + li {
border-top: 1px solid white;
}
Demo: http://jsfiddle.net/mattball/ZNR94/
there is apparently looking at a CSS selector to the elements prior siblings, only for the following, look at this example:
<html>
<head>
<title></title>
</head>
<style type="text/css">
ul {
list-style: none;
width: 50%;
margin: 50px auto;
}
li {
background: #ccc;
border-bottom: 1px solid #000;
height; 20px;
}
li:hover + li, li:hover {
border-bottom: 1px solid #FFF;
}
</style>
<body>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
<p></p>
</body>
</html>
so it is difficult only with css