Hello,
I’ve done till now hovering over each block (it’s working ok), but I want to highlight or change color when hover over the text. So when I hover over the block it changes color, but text not(pointer is not over it) and when I point text, then I want it to change or highlight. Can someone look over it and help me out. Thank you.
Simply add a color property to the hover state selector.
ul li:hover {
background: #1c1c1c;
color: red; /* or whatever colour you want */
}
ul li span:hover {
color: cornsilk;
}
The reason the hover on the span you have is not working is because for some unknown reason you have a second span in each item which is covering the first, preventing hover.
I’m not sure why you would need any spans in the items.
Second spans are made for another visualistions (left-slide-slash-bars on hover).
You see when I put
your code as this below, I can still hover over ul (just blocks) and text highlights. What I want to do is to hover only over the text, not blocks and make it change color.
ul li:hover { background: #1c1c1c; color: red; /* or whatever colour you want */ }
I’m going to look at your code a bit longer. You probably won’t like me when I’m finished because I ask lots of stupid questions that usually start with “Why”.
In the meanwhile, if you will be smart enough to delete {position:absolute} from the following rule, your spans will light up on hover.
ul li span {
display:block;
padding:10px;
/* position:absolute;
top:0;
left:0;
right:0;
bottom:0; /* DELETE Me */
}
Never mind, I can’t restrain myself…
WHY would anyone assign HTML and BODY position:absolute? What is its purpose?
body, html {
width:100%;
height:100%;
font-family:"Ubuntu Condensed",serif;
/* position:absolute; /* DELETE Me */
padding:0;
margin:0;
}
And aside {position:fixed} ? Really?
aside {
width:200px;
height:100%;
background:#111111;
/* position:fixed;
top:0;
left:0;
bottom:0; /* DELETE Me */
}
Absolute noobs tend to use positioning to position objects on a page, once. In most cases, it doesn’t work. The elements on a page should remain in the flow of the page. That’s the holistic way. You’ve never heard of holistic HTML and CSS?
I hope you noticed that the CSS properties have been written in columnar form so they can be read. Try it while the page is under development.
I’m going to question just one part Ron. 
My biggest problem with that is the use of aside rather than nav. I don’t have a problem with a fixed nav, if it’s done carefully. I’ve used fixed navs myself.
I agree with everything else and look forward to your “stupid question”.
The <aside> seemed like the left column and not exclusive to the nav elements. In the interest of semantics, I would consider adding <nav> tags around the <ul>, or, to save a level, maybe just add the role of “navigation” to the <ul>.
<aside>
Looks like the health food store is carrying some third rate catnip. Not very potent.
</aside>
Generally, I put classed span tags around text to be highlighted and assign {display:inline-block} to the spans. inline-block allows me to set padding around that text if I want to expand the area that is highlighted.
If you can set up an example, we can help you with it.
[off-topic]
lol my cats have always shown interest in stems and seeds,
the Schwag fiends
[/offf-topic]
Ok Ron, I’ve rechanged what you said. The second problem came out, that left-slider-bars cover the text, and opacity doesn’t work. Text should me in front of the orange bars and should only change color when hover just over the text not black blocks. Still fixing, thanks for help.
To raise the text above the orange bar, add position:relative to the spans
(for z-index to work, the element must be positioned)
ul li span {
display:block;
position:relative; /* ADD Me */
padding:10px;
}
See how that works.
PS: I don’t see any black blocks. Am not sure what you’re referring to.
I created inline-block, but how I can now resize it without changing text?
.note { display:inline-block; overflow: hidden; position: fixed; width: 66px; height: 6px; border: 2px solid #73AD21; } .note:hover { color: #fff; }
I’m reluctant to say because I do not understand what you are doing. There is no class=“note” in the HTML so I don’t know where this is located.
Could you please add it to your HTML?
Yes, sure:
I’m still not sure what you are doing.
Normally, one uses inline or inline-block in this situation because it hugs the text. If you want to set the width to a fixed number, there is no need for inline-block, just use block. I think you may have something else in mind that I am missing, though. What would cause you to want the width of the text box to change size other than longer text?
Again, you do not need to assign {position:fixed} to this span.
ok removed, but still the inline block isn’t sized properly to text, you don’t see that?
When I try to move this block to resize it just right to a text size, it moves also the text.
You could post a couple of screen shots showing what you see and do not want, also a shot or drawing showing what you want to see happen. That would help.
I have to go out for an estimated three hours. My time is 10:10 am. If someone else has not solved this for you before I return, I’ll pick it up again.
Try to post a couple of screen shots and a drawing now.
I don’t know if this help to clarify your misunderstanding. However, thanks for continuous Engagement.
I too don’t understand what you’re asking. This is what I see in your fiddle.
Simply, when you hover a pointer over only the text it must change a color. I tried to do it with an inline-block as you see in Nr. 1. There is a green block( to be visible), but I can’t place it in an exact position around the text(nr.1). Still looking for solution.
