I'm trying to use user Wind Shear's permanent hover solution on a group of thumbnails. However, I'd like the "permanent hover" state to only be applied to one thumbnail at a time. So if I hover off a thumbnail and onto the page the permanent hover stays applied to that thumbnail, but when I hover onto a different thumbnail it should take the permeant hover off the first thumbnail and apply it to the new one.
html:
<ul class="test">
<li id="onabout">
Alpha
<ul>
<li>Hiya! And it persists</li>
</ul>
</li>
</ul>
js:
$("#onabout").one("mouseover", function() {
$("#onabout ul").addClass('permahover');
});
css:
ul {
display: block;
width: 200px;
}
ul li {
display: block;
}
ul li a {
display: block;
border: 1px solid #000;
background: #fff;
}
ul li a {
display: block;
border: 1px solid #000;
background: #fff;
}
ul li ul {
display: none;
}
ul li ul.permahover {
display: block;
}
Here's the jsfiddle from Wind Shear's question: http://jsfiddle.net/jlratwil/w83BW/
The permanent hover function works great, but I can't figure out how to modify it to only apply to one thumbnail at a time. Thanks!
Use .on() instead of .one()
$("#onabout").on("mouseover", function() {
$("#onabout ul").removeClass('permahover');
$(this).find("ul").addClass('permahover');
});
Use .on instead of .one and remove the class then add it to the hovered element
$(".onabout").on("mouseover", function() {
$('.permahover').removeClass('permahover');
$(this).find("ul").addClass('permahover');
});
Demo
Related
Short Summary:
Upon hovering over drop down list, I would like to also rotate the arrow that is next to the list item.
https://jsfiddle.net/v08gxczo/
Long summary:
I have a list of navbar items, in which it contains a dropdown that has a right-pointing svg.
Upon hovering the 'dropdown' item the color changes, and the dropdown stays upon as long as one is hovering. I would love to transform: rotate(xdeg) upon also hovering on and within this list, except I'm having a world of trouble trying to capture it. It looks a little something like this (snippit + fiddle):
ul {
display:flex;
list-style:none;
}
img {
padding-left:10px;
}
li {
margin: auto 20px;
}
ul li ul {
visibility: hidden;
opacity: 0;
position: absolute;
transition: all 0.5 s ease;
display: none;
background - color: #0c0c0c;
padding: 1em 0 0 1em;
border-radius: 5px;
}
ul li ul li {
padding: 0 0 0.5em 0;
}
ul li:hover>ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
ul li ul li {
clear: both;
width: 100%;
}
<ul>
<li><a>item 1</a></li>
<li><a>item 1</a></li>
<li><a>item 1</a><img src="https://image.flaticon.com/icons/svg/32/32213.svg" alt="right-arrow" style="height:10px"/>
<ul>
<li><a>child 1</a>
</li>
<li><a>child 1</a>
</li>
<li><a>child 1</a>
</li>
</ul>
</li>
</ul>
In specifics, the highlighting dropdown happens here:
ul li:hover>ul,
ul li ul:hover {
visibility: visible;
opacity: 1;
display: block;
}
and I'm not sure how I would incorporate the hover over to keep the item rotated at the same time there is a hover over.
I attempted with this:
ul li:hover>ul,
ul li ul:hover {
transform: rotate(10deg);
}
but reading that code, it only makes sense that it would rotate the list, I which it does.
The more I look at this the harder it is for me to understand how to do this in just CSS. Even in javascript, it seems like a pain (adding event listeners to the open list, and then hover over to add or remove the class when mouseout.
Perhaps there is a solution I can't see?
As I understand it, you want to make an effect for the image when you hover the list.
You can affect rotating the image when hovering like this instead of your attempt:
ul li:hover img {
transform: rotate(90deg);
}
It's a simple answer, since I don't know if this is exactly what you're trying to do. Please, let me know.
If possible try to add js fiddle because I cannot understand what is the result you are getting with your current code. All i can say with the code you have provided is if you want to rotate the image on li hover then give rotete property on that img i.e
{ transform: rotate(10deg);
}
I have a dropdown menu that has display: none and when hovering on parent it has display: block via CSS. The dropdown menu links to anchors on the same page, so when I click I want the dropdown to disappear so I have on click
$('.dropdown-menu').css("display", "none")
However, the jquery has now overridden the display: block that happens on hover. How can I keep the previous functionality while hiding the menu when clicking?
JSFiddle of my code
I've added another function to show the content again and edited your original a bit.
https://jsfiddle.net/dc38u09p/6/
$(document).on('click', 'a.hide-on-click', function(event) {
$('.dropdown-content').hide();
});
$('.dropdown').on('mouseenter', function(){
$('.dropdown-content').show();
});
Have you tried .hover() from jquery ?
Add this into your javascript
$(document).on('mouseover', '.dropdown', function(event) {
$('.dropdown-content').css("display","block");
});
Best then to use jQuery for hover and click actions.
Here it is quick solution:
// menu hover
$(".dropdown").mouseover(function() {
$('.dropdown-content').css("display", "block");
})
.mouseout(function() {
$('.dropdown-content').css("display", "none");
});
//menu click
$(".dropdown").click(function() {
$('.dropdown-content').css("display", "none");
});
/* Dropdown Button */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
Im basicly trying to get my span to show on mouseover and that works as intended. What I want to do is get the spans to the correct images, because I plan on filling that list with more stuff.
This is how it looks like now: http://jsfiddle.net/uc8jc/539/
Heres my code:
<ul class="frontpagephotos">
<li>
<img src="http://www.myrtlebeachproduce.com/wp-content/uploads/2013/01/Banana-300x300.jpg" alt="Jogginglarms armband" />
<span>Jogginglarms armband</span>
</li>
<li>
<img src="http://www.myrtlebeachproduce.com/wp-content/uploads/2013/01/Banana-300x300.jpg" alt="Jogginglarms armband" />
<span>Jogginglarms armband</span>
</li>
</ul>
$(document).ready(function(){
$("span").hide();
$(".frontpagephotos").on("mouseenter", "li", togglePhotos);
$(".frontpagephotos").on("mouseleave", "li", togglePhotos);
function togglePhotos() {
$(this).find("span").slideToggle("fast");
}
});
and the css:
ul.frontpagephotos li{
display: inline;
}
ul.frontpagephotos li img{
border: 2px solid black;
position: relative;
}
ul.frontpagephotos span{
position: absolute;
color: rgb(255, 255, 255);
background-color: rgb(0,0,0);
opacity: 0.5;
width: 18em;
margin-top: -2.5em;
padding: 0.5em;
display: block;
text-align: center;
}
Appreciate any answers, cheers!
Your span has the position: absolute property, so it's positoned relative inside the next parent with position: relative. It should be positioned relative inside the li, but actually the next parent with position: relative is the body (or window?).
The simple solution: Change your CSS code to this:
ul.frontpagephotos li {
display: inline-block;
position: relative;
}
When the li has position: relative, the span is positioned relative inside the li. You also need block or inline-block in order to be able to set position: relative.
That's it! Working fiddle: http://jsfiddle.net/uc8jc/545/
You could use hover instead, and just pass $(this) into the functions for on and off states:
$(document).ready(function(){
$('span').hide();
$("img").hover(function(){
togglePhotos($(this));
},
function(){
togglePhotos($(this));
});
function togglePhotos(obj) {
obj.next().slideToggle();
}
});
http://jsfiddle.net/uc8jc/544/
I have a standard drop-down menu that uses jQuery to hide the children li elements. However, upon loading the site, the child elements quickly appear and subsequently disappear (sort of like a quick flash). I don't think this is at all related to the flash-of-unstyled-content known issue.
The site is in Hebrew, but that shouldn't affect anything. The site is located here
If you'd like a sample HTML + CSS and the Javascript code, I would gladly post it here.
I was just wondering if anyone has encountered this issue before. I'm seeing it in Chrome, and I haven't really checked if it also happens in IE and Firefox.
Thanks!
EDIT: HTML/CSS/JS shown below:
HTML:
<ul class="menu">
<li>blah
<ul class="sub-menu">
<li>blah</li>
</ul>
</li>
</ul>
CSS:
/* NAVIGATION -- level 1 */
ul.menu { float: right; list-style-type: none; font-size: 15px; margin-top: 50px; }
ul.menu > li{ float: right; display: inline; position: relative; margin-left: 30px; }
ul.menu li > a { display: block; color: #5c5d5f; text-decoration: none; border-bottom: solid 1px #9b9a95; }
ul.menu li:hover > a, ul.menu li a:hover , ul.menu li.current_page_item > a { color: black; }
body.home .current_page_item > a { }
body.home .current_page_item > a:hover { }
/* NAVIGATION -- level 2 */
ul.menu li > div { display: none; width: 157px; height: 171px; margin-right: -10px; position: absolute; opacity:0; background: url(images/subNav_bg.png) no-repeat top right; }
ul.menu li > div span { height: 15px; background: transparent; display: block; } /* used to push down the menu */
JS:
// navigation menu //
// add hasSubMenu to each li that has one //
$('.menu > li').has('ul').addClass('hasSubMenu');
// wrap with <div> //
$('li.hasSubMenu > ul').wrap('<div />');
$('ul.menu li > div').css('display', 'none');
$('ul.menu li > div').prepend('<span></span>');
$('li.hasSubMenu > a').click(function () {
return false;
});
// add class to <div> for extendedBg //
$('li.extendedBg').find('div').addClass('subBg2');
$('li.hasSubMenu').hover(function () {
// hover on
$(this).addClass('hover').find('div').stop().fadeTo("medium", 1, /* when done fading */
function () {
$(this).find('div').css('display', 'block');
//$(this).find('ul').css('display','block');
}
);
}, function () {
// hover off
$(this).removeClass('hover').find('div').stop().fadeOut();
});
Set the dropdown menu as display: none in the page's CSS or directly in the element itself using style="display:none". This will hide it as the page loads.
I have the same issue :( except when i used the css to hide it on load, i now have the problem that it never displays! even when hovering over the parent...
Even before i posted my reply i thought id try one more thing
#navigation ul ul{
display:none;
}
instead of
#navigation ul ul li{
display:none;
}
and now it works perfectly
I recommend setting the style to display:none the the li elements in a style sheet, so that the browser knows to render them initially as not displayed. Then, when jQuery loads, the inline style that jQuery adds will override the display style.
ul li {
display:none;
}
Try:
.mobile-menu:not( .mm-menu ) {
display: none;
}
where '.mobile-menu' is whatever class or ID you have given to the containing element of your menu.
e.g
<div class="mobile-menu">
<ul>
<li>about</li>
<li>Food</li>
</ul>
</div>
I am very new to javascript and ajax/jquery and have been working on trying to get a script to open and close the drop menu on click rather that hover.
The menu in question is found on http://www.gamefriction.com/Coded/ and is the dark menu on the right side under the header. I would like it to open and close like the other menu that is further below it (it is light gray and is in the "Select Division" module).
The gray menu is part of a menu and the language menu is not.
I have a jquery import as well which can be found in the view source of the above link.
My Javascript Code:
<script type="text/javascript">
/* Language Selector */
$(function() {
$("#lang-selector li").hover(function() {
$('ul:first',this).css('display', 'block');
}, function() {
$('ul:first',this).css('display', 'none');
});
});
$(document).ready(function(){
/* Navigation */
$('.subnav-game').hide();
$('.subnav-game:eq(0)').show();
$('.preorder-type').hide();
$('.preorder-type:eq(3)').show();
});
</script>
My CSS:
#lang-selector
{
font-size: 11px;
height: 21px;
margin: 7px auto 17px auto;
width: 186px;
}
#lang-selector span
{
color: #999;
float: left;
margin: 4px 0 0 87px;
padding-right: 4px;
text-align: right;
}
#lang-selector ul
{
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#lang-selector ul li a
{
padding: 3px 10px 1px 10px;
}
#lang-selector ul, #lang-selector a
{
width: 186px;
}
#lang-selector ul ul
{
display: none;
position: absolute;
}
#lang-selector ul ul li
{
border-top: 1px solid #666;
float: left;
position: relative;
}
#lang-selector a
{
background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
color: #666;
display: block;
font-size: 10px;
height: 17px;
padding: 4px 10px 0 10px;
text-align: left;
text-decoration: none;
width: 166px;
}
#lang-selector ul ul li a
{
background: #333;
color: #999;
}
#lang-selector ul ul li a:hover
{
background: #c4262c;
color: #fff;
}
My HTML:
<div id="lang-selector">
<ul>
<li>
Choose a Language
<ul>
<li>English</li>
<li>Deutsch</li>
<li>Español</li>
<li>Français</li>
<li>Italiano</li>
</ul>
</li>
</ul>
</div>
Thanks!
$(function() {
$("#lang-selector li:first").click(function(){
$('ul:first',this).toggle();
})
});
Using toggle will require you to click to open then reclick to close
I would do something like this...
$(function() {
$("#lang-selector > li").click(function() {
$('ul:first',this).toggleClass('active');
});
});
And, then, in the CSS add this:
.active { display: block; }
<< EDIT: Removed "ul" from ".active" class for CSS rendering efficiency >>
Also make sure that the sub-nav <ul> has "display: none;" on it by default in your CSS.
This will make it so that clicking an <li> tag in #lang-selector, but not in any sub-nav <ul> tags will either open or close the sub-nav, depending on it's current state.
If you're worried about the accessibility of having "display: none" on the sub-nav by default, you can do something like this...
$(function() {
$("#lang-selector li ul").addClass("hidden");
$("#lang-selector li").click(function(e) {
e.preventDefault();
$('ul:first',$(this)).toggleClass('hidden active');
});
});
<< EDIT: Altered selectors to match example provided, turned "this" into jQuery object. >>
And then also add this to the CSS
.hidden { display: none; }
In this scenario, you have the <ul> showing by default, then when the document loads, jQuery adds the "hidden" class to all of them to hide them, then on the click of the <li> it will toggle the hidden and active classes, displaying them or hiding them.
You'll also need to remove your current "display: none" from your #lang-selector ul ul in CSS, otherwise it takes priority over the hidden / active classes.
search this $("#lang-selector li").hover and replace with
$("#lang-selector li").click
.hover, .click, .something, are all triggers, view this link:
Jquery Events
to learn more about events in Jquery!
Ps: sushil bharwani (vote it), is right, just change your .hover by the .click
if you need two functions for a click event, try .toggle
i'm using this:
$('.triggerlist').toggle(function(e) {
e.preventDefault();
$(this).find('ul').fadeIn();
},function() {
$(this).find('ul').fadeOut();
});
Which allows me to do more stuff on the 2 functions than just the .click with its 1 function.