BACKGROUND
I would like to be able to hover over a link and a set of text fade out on this action
HTML
<nav class="PageNav">
<ul>
<li id="HomeLink">Home</li>
<li id="OverviewLink">Overview</li>
<li id="ServicesLink">
Mega Services
<ul class="PageSubNav">
<li>Subpage 1</li>
<li>Subpage 2</li>
<li>Subpage 3</li>
<li>Subpage 4</li>
<li>Subpage 5</li>
<li>Subpage 6</li>
</ul>
</li>
<li id="GalleryLink">Gallery</li>
<li id="VideoLink">Video</li>
<li id="ContactLink">Contact</li>
</ul>
</nav>
<article class="ContentText">
<p>text</p>
<p>dummy text</p>
<p>Dummy text, dummy text, dummy text, dummy text, <strong>3 Paragraphs, Roughly 209 Words</strong></p>
</article>
CSS
#ServicesLink:hover .ContentText p {
color: rgba(255,255,255,0.5);
}
I'm having trouble in thinking this one through, here's what I have but to no avail.
The idea being that when one hovers over the "mega services" tab the text contained in the article section fades.
You can do this by declaring opacity:0 for mega services (I suppose id ServicesLink). Or, if you want it to be smoother you can use jQuery:
$("#id_where_you_hover").hover(function(event){
$("#id_that_you_want_to_fade_out").fadeOut(1000, function () {
$(this).html("here you put something to replace if you want").fadeIn(2000);
});
});
What your CSS is doing is targeting .ContentText p inside #ServicesLink -- which doesn't exist.
Your .ContentText is out of the CSS scope. There is no way in vanilla CSS to target selectors outside of it's parent.
JavaScript is your only valuable solution to scope elements on your page.
What is the aim or purpose of this, so we could maybe give you a better answer?
UPDATE: Updated answer.
In JS, you can do the following:
var hoverEl = $('#ServicesLink');
var targetEl = $('.ContentText p');
hoverEl.on('mouseenter', function() {
targetEl.css({'color': 'rgba(255, 255, 255, 0.5)'});
});
hoverEl.on('mouseleave', function() {
targetEl.css({'color': 'rgba(255, 255, 255, 1)'});
});
DEMO
You can't do that with CSS currently.
You will have to use JavaScript.
Related
I know this should be a stupidly easy topic, but I'm confused and I spent way longer than I should trying to understand this example that my professor gave us.
From what I understand, the rules are supposed to be that you go first for inline css, then document css, then external css, and then priority. The priority was from what I thought 100*IDs+10*Class+1*Element reference.
Here is the code that's really confusing me below:
<div id="id1">
<ul>
<li class="c1" id="id2">Item 1</li>
<li class="c2 c3">Item 2</li>
<li class="c3">Sublist:
<ul>
<li class="c1">Subitem 1</li>
<li class="c2">Subitem 2</li>
<li class="c2" id=”id3”>Subitem 3</li>
</ul></li>
<li>Item 4</li>
</ul>
<div id="id4">
<ul>
<li id="id5">One thing</li>
<li id="id6" class="c2">And another thing</li>
<li id="id7" class="c1">A third thing.</li>
</ul>
</div>
</div>
<style>
div > li
{
color: yellow;
}
.c2
{
color: red;
}
ul li+li+li
{
color: green;
}
#id1, #id4
{
color: orange;
}
#id7
{
color: blue;
}
</style>
In the above code though, item 2 is red, sublist(+subitem1) are green, etc. How is that possible? Why isn't everything coming out orange? Shouldn't the #id1 style be applied to everything automatically since it is the only one with an ID specifier(and everything is a child of div with id="id1"?
The priority formula you wrote is ok if you have two rules to same element.
In css child element inherits from parents the colors, like in your example.
If new rules, despite having a lower specificity number, is applied to child, this override the inheritance.
Anyway read this: https://css-tricks.com/specifics-on-css-specificity/
An element's style overrides it's inheritance.In cases when a style was not defined we will prefer inherited value over default.
There is misunderstanding.
It did orange at first place to all tags .but later as some of the tags are defined different according to css, then it changes to specified color that you mentioned in css.
For CSS types:
http://webdesign.about.com/od/css/qt/aatypesofcss.htm
edited.
I have this list
<nav>
<ul>
<li>list el</li>
<li>list el</li>
<li>list el
<ul>
<li>inside</li>
<li>inside2</li>
</ul>
</li>
</ul>
</nav>
<section>
<img src="#">
<h1>Some Title</h1>
</section
And I am using :focus to display the dropdown list on click, without using JS. Everything is ok for now. But I would like to,change the color of the entire section when the dropdown list is active (through :focus).
Is there any way I could do that entirely with css? I am trying to use as little JS as possible (definetly no jQuery)
Yes you can, without the slightest bit of JS, using the Radio Hack. Basically, use a label as your "focused" element. This label should have its for attribute refer to an input type="radio" that is hierarchically above the elements that you want affected. Then just use the following css selector #myradio:checked ~ #mysection{ }.
More details here: https://stackoverflow.com/a/21939282/2306481
If you are open to changing from using :focus to using :target then yes you can.
It is not clear from your question how you are implementing your drop-down behaviour, but this is a simple example, that should explain how you can approach it. (only the third item has a drop down, but all three links should change the background colour).
The behaviour of :target is a little different to :focus however, so things that you need to be aware of are:
target will change the URL, creating a history point.
target will retain the "focus" even if the user clicks on a different element, the only time a target is lost is when another target is targeted.
li ul {display: none;}
#dd1:target { background: gold; }
#dd2:target { background: green; }
#dd3:target { background: red; }
#dd3:target .dd3 {display: block;}
<div id="dd1">
<div id="dd2">
<div id="dd3">
<nav>
<ul>
<li>list el</li>
<li>list el</li>
<li>list el
<ul class="dd3">
<li>inside</li>
<li>inside2</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
The question pretty much explains it but I have list items I want to put a simple diamond icon before them but when I try to use ::before it ends up putting the image above instead of the same line and I can't really seem to find out how to put it right before the list icon on the same line.
Like I said the image is just a small diamond, its 5px by 5px
.list-menu::before {
content: url('../images/menu-icons/image-before.png');
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
There's no need to use the ::before pseudo-element here at all. You can just use a background image:
.list-menu {
background-image: url('http://placehold.it/16x16');
background-position: left center;
background-repeat: no-repeat;
padding-left: 20px; /* Adjust according to image size to push text across. */
}
<div class="sb-slidebar sb-left sb-style-push">
<nav>
<ul>
<li class="list-menu">Home</li>
</ul>
</nav>
</div>
Well, list-style-image is made for that.
Supported since IE 4.0. That should be enough I guess.
ul {
list-style-image: url('http://placehold.it/12x12');
}
<ul>
<li> Text content </li>
<li> Text content </li>
<li> Text content </li>
</ul>
Answer 2022
Nowadays you can use ::marker pseudo element
li::marker {
content: ' 🤖 '
}
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
I'm designing a navigation bar as shown in image below (a) with the following code:
<ul>
<li class="unselected">Step 1</li>
<li class="selected">Step 2</li>
<li class="unselected">Step 3</li>
<li class="unselected">Step 4</li>
<li class="unselected">Step 5</li>
</ul>
I want to have one background image for unselected steps (d) and one for the selected step (c). For simplicity let's assume Step 1 and Step 5 use the same background as well.
I want to adjust the button background in HTML only with a class name.
The question is how can I achieve the result with CSS? I just want to know how background of two neighbor elements can overlap each other?
Edit: the steps are links. the background is a transparent PNG file preferably only containing the blue or gray shape and its border.
Answer: http://jsfiddle.net/morrison/99LhB/
Notes:
Click-boxes will be messed up on diagonals. I just realized that this will always be the case. I'd decrease the width of the arrow if I were you to help avoid this issue. I would also add a hover state which would help clarify which one you are hovering on. If they aren't hyperlinks, this doesn't matter: feel free to remove those css rules.
HTML simplicity makes for CSS complexity in this case. There are less classes to worry about, but now we rely on CSS selectors. I would personally choose this way over the other, but that's a personal choice.
There's only one image. Uses a CSS sprite to accomplish this. It also speeds up the webpage a little.
Shows how it looks for all 5 steps.
You can do this. what you want to do is use a negative margin.
.someclass {
margin-left: -5px;
}
That should overlap the each of the elements (if applied to all li objects).
They can't overlap only the background, but html element might be stacked. However I'd recommend such a solution only if you have no other.
In your visual example, I guess that must be something like that :
Html :
<ul>
<li class="before_selected">Step 1</li>
<li class="selected">Step 2</li>
<li class="after_selected">Step 3</li>
<li class="unselected">Step 4</li>
<li class="unselected">Step 5</li>
</ul>
CSS :
.unselected {
background-image: url('all_grey.jpg');
}
.before_selected {
background-image: url('left_grey_right_blue.jpg');
}
.after_selected {
background-image: url('left_blue_right_grey.jpg');
}
.selected {
background-image: url('all_blue.jpg');
}
How do I rewrite this HTML to validate to XHTML 1.0 Strict?
<div>
<a href="link.html">
<p>Some text</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</a>
</div>
My intent is to have the entire div serve as a clickable link. The content within simply describes the contents of the destination page. W3 Validator says I can't have a block element (<p>) inside a span tag (<a>).
How do I rearrange this so that my DIVs remain block links?
You're not allowed to wrap a block level element in an inline level element so you have a few alternatives.
You can wrap every line that you want linked in the ...
<div>
<p>Some text</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
You can add a javascript onclick function to reproduce the same results.
//jQuery
$('div').click(function() {
window.location = 'link.html';
});
//Non jQuery
document.getElementById('yourDiv').onclick = function() {
window.location = 'link.html';
}
If you use the Javascript, make sure you use CSS to make it apparent that the contents are links. I'd recommend pseudo classes
div {
text-decoration: underline;
color: #0000FF;//or whatever your link color is
}
div li:hover, p:hover {
color: #CC00FF;
cursor: pointer;
}
You can't rearrange it to make the block a link. What you could do is to make every single element in the block a link, or you can use javascript.
<div style="cursor:pointer" onclick="location.href='link.html'">
<!-- ... -->
</div>
As is, your fragment is valid HTML5. Use that instead and your problem vanishes. All you have to do is change the doctype to <!doctype html>.
Your <UL> is also a block element, so it won't work there either. How about:
<div onclick="location.href = 'link.html'">
<p>Some text</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>