Good Day.
I have an element that has two three classes assigned to it. Two are assigned in the html, and one is assigned by jQuery as an active class.
Now I want to specify, in CSS, a hover effect but to the one specific element: The "menuItem first" class...
HTML:
<ul>
<li class="menuItem first"><img src="img/sample_slides/1.png" alt="thumbnail" /></li>
<li class="menuItem"><img src="img/sample_slides/1.png" alt="thumbnail" /></li>
<li class="menuItem"><img src="img/sample_slides/1.png" alt="thumbnail" /></li>
<li class="menuItem"><img src="img/sample_slides/1.png" alt="thumbnail" /></li>
</ul>
CSS:
li.act,li.act:hover{
/* The active state of the thumb */
background:url(img/active_bg2.png) no-repeat;
}
li.act .first, li.act .first:hover{
/* The active state of the thumb - first class only! */
background:url(img/active_bg1.png) no-repeat;
}
I know the css right above is wrong. What is the right annotation?
Remember that the .act class is assigned by jQuery to the active element...
When you say
li.act .first
what you're really saying is "the element with class first inside an <li> element with class act".
If you want to say "the element with both first and act classes, you'd want to write them out without spaces:
li.act.first
Following that, to achieve a hover ruleset for said selector, you can just append the pseudo :hover as always:
li.act.first:hover
you have an extra space in your selector
use
li.act.first, li.act.first:hover{
/* The active state of the thumb - first class only! */
background:url(img/active_bg1.png) no-repeat;
}
selector li.act.first means the li element has both act and first in the class property.
What you have at the moment is setting the same background colour for both states. So instead you would use,,
.first{background-color:#faa;}
.first:hover{background-color:#afa;}
Im using background-color here just as a working example,
http://jsfiddle.net/mshtT/
When you write li class="menuItem first like the way you did in your first li element in HTML, menuItem and first become two separate classes. To apply the hover effect in just one element you can just use the following CSS
.first:hover {
/*the effect you want*/ (eg. Background: #444;)
}
It would only apply to the element that has the first class in it, that is your first element.
Related
Hi I have refered a lot of website but i dint found the solution that how can we change the option background color on hover as by default it is blue but I want to change the color to green. Please refer the screenshot below so it may give more clearity on what i m asking for.
I tried using this css code but its not having any effect : option:hover{background:green;}
Select option form element designs can't be updated with CSS. If you are not using it inside a form, I would suggest you to use custom Dropdown with even listeners from javascript as -
<div class="dropdown-wrap" id="dropdown-wrap">
<div class="dropdown-head pointerCursor" id="dropdown-head">
<span class="sel-option" id="sel-option">DIsplay header</span>
</div>
<ul class="list-ul pointerCursor hide" id="list-ul">
<li class="list-li" data-val="1">1</li>
<li class="list-li" data-val="2">2</li>
<li class="list-li" data-val="3">3</li>
</ul>
</div>
Add 2 event listener at least as -
document.getElementById('dropdown-head').addEventListener('click', (e) => this.showTeamsList(e));
document.getElementById('dropdown-wrap').addEventListener('mouseleave', (e) => this.hideTeamsList(e));
Add event listener functions add and remove hide class from list-ul. For hide class you can simply use max-height property as -
.hide {
max-height: 0 !important;
}
and overflow: hidden property in css property of list-ul.
I did not find any answer in the web, so may be somebody could help me.
For example if we have next CSS declaration:
.hot_imgs li .detail{position:absolute;left:0;top:0;display:none;width:190px;height:190px;padding:0 40px;color:#fff;font-size:16px;font-family:"Microsoft YaHei","\5fae\8f6f\96c5\9ed1","\5b8b\4f53"}
.hot_imgs li .detail h3{margin-top:75px}
.hot_imgs li a:hover .img_bg,.hot_imgs li a:hover .detail{display:block}
And given elements:
<div class="hot_imgs">
<li id="711F">
<a href="#">
<img src="www.fishki.com" alt="Young" width="270" height="190">
<span class="img_bg"></span>
<div class="detail">
<h3>Young</h3>
</div>
</a>
</li>
<div>
As we can see from CSS declaration, when link of the list inside div with class hot_imgs is hovering, the div will be overlaid by another div with details class.
I'd like to use jQuery to identify which elements can potentially have a ":hover" attribute triggered on roll over without any mouse interaction.
Thanks a lot
You cannot target pseudo elements themselves, so if you are going to use jquery for this it has something for hover built in. You need to know what items you want to check for hovering, so for example if you wanted to check the image you could do.
$(".hot_imgs img").hover(function(){
//your logic here
});
Just a side note - All elements can have ':hover', so you will need to target with jquery. So there is nothing to check which elements 'can potentially' have :hover, as it is a pseudo selector/class.
Here is a fiddle for this example - http://jsfiddle.net/W4Km8/5413/
I am looking for a code which can change li image of left side navigation with click. I have 4 options and 8 images but want only one to be activated at one time.
<div class="aside important">
<ul>
<li><img src="../images/about_active.png" alt="" /></li>
<li><img src="../images/advantage.png" alt="" /></li>
<li><img src="../images/partners.png" alt="" /></li>
<li><img src="../images/history.png" alt="" /></li>
</ul>
</div>
I want only one active image at a time. Please help me with a code.
if you use static images, you should use css class instead of img. Its more flexible for future changes.
example:
1) make css like
.nav-but { background: url(yourimg) 0 -20px no-repeat; } // with -20px because its normal bg
2) make second active css like
.nav-but:hover, .active { background: url(yourimg) 0 0px no-repeat; } // 0px as second part of bg used for active and hover
3) if are you using jquery you can add class active like
http://api.jquery.com/addClass/
source for working example
make menu button
button class
Well, you can achive this in two different ways?
You can use javascript to change the image src when an element is clicked (whether the anchor or the list item) depending on your css definitions
Or, you can get rid of the images and use css to style your menu by using the background css property and then use css pseudo classes to change the background image.
I personally prefer the second option because it is a much cleaner approach.
Let me know if it makes sense to you
Leo
This question is in regards to precedence. I have an <ul> that contains my nav items in <li> I have an id for the <ul> which I use to reference the <li> and <a> tags nested within for styling. This all works fine, but when I use JavaScript to add a class to these specific <a> tags, to change the appearance when hovering over the links nothing happens.
I know the code is correct as I have tested it, but it just seems the ID styles take precedence over the Class's in when referencing styles.
How would I go about finding a solution, one idea I have is to remove the existing ID on mouseenter before adding the class, and then visa versa on mouseleave. Is there an easier solution?
ID styles are stronger, but you can use it when adding class for styling links as well.
So, if your menu is
<ul id="main">
<li><a href=#></a></li>
</ul>
And JS adds class "hovered" to element, then use CSS
#main .hovered {
.. styles here
}
Try adding !important to the end of your css for values which require overriding.
.class { color: #fbfbfb !important; }
I have this menu:
<ul id="nav">
<li class="level0">Item 1</li>
<li class="level0 parent">
<a><span>Click Me!</span></a>
<div class="submenu">
<ul>
<li>Subitem 1</li>
<li>Subitem 2</li>
</ul>
</div>
</li>
</ul>
I want the submenu to be hidden when the page is loaded. When the user clicks the parent item, the submenu should appear.
When I use inline CSS like this, everything works fine.
<div class="submenu" style="display:none;">
See this demo: http://jsfiddle.net/zJk6P/ (Click on "Click me" in the bottom right to run the demo.)
When I use external CSS like this, the submenu doesn't appear anymore.
#nav div.submenu{
display: none;
}
See this demo: http://jsfiddle.net/5tNqc/4/
Why is there any difference and how can I get the sliding effect to work with external CSS?
The reason my code didn't work was that Javascript doesn't have access to external CSS style declarations. Only inline styles are accessible trough element.style.
Effect.toggle(element, 'slide'); tries to slide the element down when the element is not displayed, and up when the element is displayed. So when the element is hidden by an external style sheet, Effect.toggle will try to slide the element up, because it simply doesn't "know" the element is already hidden.
The solution is to work with class names. My final solution checks whether the element has a certain class name. When the class name is present, the element is not clicked yet, so the element is slided down and the class name is removed. All next clicks, the element is toggled.
I built and uploaded a small demonstration here: http://i.amniels.com/ext/stackexchange/2011-09/index.html
The difference is that you don't change display to be set to display: block;, which is the standard, and so it gets overridden by the external explicit definition that it should be hidden. If you add another line in the Javascript to add thisDiv.style.display = block;, and remove it at the end of hiding it, it should work just fine.
Update:
So, the reason that it doesn't show up when you have display: none; in your CSS file, is because when the Javascript animation starts, instead of setting display: block; on your div, which would make it visible, it simply removes the display property on the element entirely, so it is still affected by the external CSS.
My suggestion: if you don't want the Javascript to become more difficult, simply leave the style inline, so that it can be removed later by Javascript automatically. If you want to use an external CSS style for it, you could just add a short helper function to your Javascript to change the CSS display property to block whenever it starts, and set it to display: none after the animation is finished.