I have a list with li elements and I want on mouseover, to hover the entire line separately.
In the example here, I managed to hover but just the <span>. As I have 2 <span>s in the same line, there are two different hover areas.
How can I hover the whole line on mouseover?
Wrap your spans in another span and give it a block display. Apply :hover to this wrapping span:
Example HTML:
<li>
<span class="hi">
<span> f1.txt</span>
<span class="pull-right">Size: 0.04 kb </span>
</span>
</li>
Example CSS:
span.hi {
display: block;
}
span.hi:hover {
...
}
Demo Fiddle: http://jsfiddle.net/abhitalks/fnbTg/4/
Try this:
li:hover>:not(ul) {
background: #E0F0FF;
}
This will color based on :hover on the li, not based on hover on the span. But on the other hand, you don't want to color the sublist, so use :not().
Demo: http://jsfiddle.net/QkaYJ/1/
Related
I wrote simple CSS to align text using the w3schools example with:
text-align:center
When I add an underline in the same format, the underline works.
Here's the snippet:
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
Here's the w3schools page (the align text section):
https://www.w3schools.com/css/css_align.asp
In my full code I have the text I want to center inside another box. I've tried it both inside that box and outside any boxes. It doesn't center.
.CenterIt {
text-align:center;
display:block;
}
.UnderlineIt {
text-decoration:underline;
}
<span class="UnderlineIt">
<span class="CenterIt">Registration Form</span>
</span>
The display property of span by default is inline. i.e.,
display:inline;
Therefore, <span> will take only the width of its content. In contrast, block elements like <div>, by default, take the full line (and thereby the full width of the page) for its content.
To make the text-align work for <span>, you need to change it into a block element.
Set
display: block;
for the span with .CenterIt class. This will make .CenterIt take the full line (and thereby the full width of the page), and then the text-align: center; will centralize the content.
Try this. You need to wrap it with a container unit of <div>
<div class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</div>
Following will work as well
<span class="UnderlineIt">
<div class="CenterIt">Registration Form</div>
</span>
It might work better if you run “display: flex;” on the container span and “justify-content: center;” on the child span. Flexbox is a little easier to use when placing items within a container.
Because your html, is in wrong format. You cant have a span child of a span.
try like this:
<div class="CenterIt">
<span class="UnderlineIt">Registration Form</span>
</div>
to have the span centered , without a parent div you would need to put the display, as block.
so you could have on your html and css like this:
span{display:block;}
.CenterIt {
text-align:center;
}
.UnderlineIt {
text-decoration:underline;
}
html:
<span class="UnderlineIt CenterIt">Registration Form</span>
I am using metismenu and I need the parent category clickable. I am able to acheive this by defining the clickable element.
$("#menu").metisMenu({ triggerElement: '.has-arrow'});
The problem now is my html list layout changes from
<li><a class="has-child" href="http://google.com">Monitors <span class="has-arrow"></span></a><ul>...
to
<li><a class="has-child" href="http://google.com">Monitors</a> <span class="has-arrow"></span><ul>....
This breaks the alignment, since the span is now outside the "a" tag. How can I align the span class to the right so its inline with the "a" element?
Desired output is like this:
You can align span to right of anchor element by assigning inline-block to li element.
li{
display: inline-block;
}
li .has-child{
margin-right: 20px;
}
<li>
<a class="has-child" href="http://google.com">Monitors</a>
<span class="has-arrow"></span></li>>
I wrote the following code, including a div and a span. I want the span inside the div to have a different colour, but it doesnt seem to work.. This is the html code:
<div class="menu">
<p class="menuHeader">Menu</p>
<ul class="menuList">
<li>Inspiration</li>
<li>Motivation</li>
<li>Decision</li>
<li>Solution</li>
<li>Action</li>
</ul>
<span id="decorationBox">
<br/>
</span>
</div>
In CSS I set the background color of the div 'menu' to a dark blue color, and the background color of the span 'decorationBox' to a lighter blue color. I also tried using a higher z-index to bring the span up to the front, but it wont display. Is it because of the span being inside the div?
You don't have any 'real' content in the <span>, therefore it won't (at least with default CSS settings) be displayed.
Setting display to block would make the width fit to the parent width:
→ jsFiddle
span#decorationBox {
background-color: red;
/* the default setting is "display: inline" for <span>s */
display: block;
}
Most of CSS properties does not work properly with span. Try to use a div instead.
It's because your span width is 0px. Place content in the span and you will see. With the br tag, you just have 18px on height in the span.
You can add property display:block; on span to see the difference.
The tag is used to group inline-elements in a document.
span is an inline tag by default, it doesn't have width or height properties, so if it is empty you cannot see it as bold or italic... You can change span to div or give block property in css:
.decorationBox {
display:block;
}
<div class="menu">
<p class="menuHeader">Menu</p>
<ul class="menuList">
<li>Inspiration</li>
<li>Motivation</li>
<li>Decision</li>
<li>Solution</li>
<li>Action</li>
</ul>
<span id="decorationBox">
Content here.
</span>
</div>
Css
div.menu {
background-color: blue;
}
.menu #decorationBox {
background-color: red;
display: block;
}
OR
div.menu{background:blue;}
.menu span{background-color:red;}
Ex. http://jsfiddle.net/2NwmU/1/
I have this pure-CSS (display) solution for a follow button:
<span class="follow-status following">
<a href="#" class="btn btn-follow" data-user-id="123">
<span class="following-text"><i class="icon-ok"></i> Following</span>
<span class="follow-text"><i class="icon-plus"></i> Follow</span>
<span class="unfollow-text"><i class="icon-remove"></i> Unfollow</span>
</a>
</span>
I'd like to, for example, change the text on hover depending on what shows up. However the a element has the padding, and stylizing the span looks really awkward.
- Should I overwrite the A padding and shift it into the span?
- Should I write the HTML differently?
- Should I just toggle applicable text/style by JS?
- Something else?
you can see the outer span has the class "following"
.follow-status span { display:none }
.following .following-text { display: block}
.following:hover .following-text { display: none}
.following:hover .unfollow-text { display: block}
how would you accompliush that within the twitter bootstrap confines?
Personally, I would remove all padding/margins from the spans inside the anchor and apply your CSS padding/margins etc to the anchor element. That way you future proof yourself incase you want to add different elements inside the anchor element.
I have a simple list I am using for a horizontal menu:
<ul>
<h1>Menu</h1>
<li>
Home
</li>
<li>
Forum
</li>
</ul>
When I add a background color to the selected class, only the text gets the color, I want it to stretch the entire distance of the section.
Hope this makes sense.
The a element is an inline element, meaning it only applies to the text it encloses. If you want the background color to stretch across horizontally, apply the selected class to a block level element. Applying the class to the li element should work fine.
Alternatively, you could add this to the selected class' CSS:
display: block;
Which will make the a element display like a block element.
Everyone is correct that your problem is that anchors are inline elements, but I thought it is also worth mentioning that you have an H1 inside of your list as well. The H1 isn't allowed there and should be pulled out of the UL or placed into an LI tag.
Would something like this work?
.selected {
display: block;
width: 100%;
background: #BEBEBE;
}
Put the selected class on the <li> and not the <a>
<a> elements are inline by default. This means that they don't establish their own block, they are just part of the text. You want them to establish their own block, so you should use a { display: block; } with an appropriate context. This also enables you to add padding to the <a> elements rather than the <li> elements, making their clickable area larger, and thus easier to use.