I just saw a demo that had this jquery code to show and hide a dive on hover, can't this be done with just regualr css though? And if you can do it with css is there any advantage of doing it with javascript?
$('.comment').hover(function() {
$(this).children('.delete').show();
}, function() {
$(this).children('.delete').hide();
});
CSS hover works fine with anchor tags, but IE6 does not recognize hover events on things like li tags.
If you were using an anchor tag, however, you could achieve the same effect in CSS:
a.comment .delete { display: none; }
a.comment:hover .delete { display: block; }
You can do this with CSS but IE6 only supports the :hover pseudo-class on anchor tags (A), so it's not as common.
Jody is correct. Check out the docs for the CSS Display property.
There is more functionality that the .hover will do. If you provide it more than 2 functions it will cycle through all the functions.
Example
$('.comment').hover(
function(){$(this).children('.delete.first').show()},
function(){$(this).children('.delete.first').hide()},
function(){$(this).children('.delete.second').show()},
function(){$(this).children('.delete.second').hide()}
);
That would show one set of children the first time they hover, then hide, and the next time show a different set of children.
The hover function also works over multiple elements, and only fires if the mouse has left all the elements (not just when it leaves one and moves to another)
I dynamically create something like this on the server side. I'm sure there is a more efficient/prettier way but this usually serves my needs. Basically hides all the divs and un-hides the one that needs to be shown (passed as arg in function from onClick event).
function toggleTab(id)
{
document.getElementById('divEnrollment').style.display='none';
document.getElementById('divSearch').style.display='none';
document.getElementById('divMeeting').style.display='none';
document.getElementById('divBenefit').style.display='none';
document.getElementById('div' + id).style.display='block';
document.getElementById('spnEnrollment').style.color='blue';
document.getElementById('spnSearch').style.color='blue';
document.getElementById('spnMeeting').style.color='blue';
document.getElementById('spnBenefit').style.color='blue';
document.getElementById('spn'+id).style.color = 'red';
}
Related
On the site http://themeforest.net/ there is a category dropdown that activates as the mouse hovers over the menu item (e.g. HTML, Marketing, CMS). However, I cannot seem to break on any DOM event that is attached to it (checking using Firefox debugger). The expected event listeners were something like mouseover on the <li>.
What I'd like to know is what events are attached to it (or how is this animation being triggered otherwise), how you found that information and whether these events can be emulated with $(el).trigger() or el.createEvent()
Thanks in advance.
It doesn't need to be a javascript which shows the submenu, it can also be done in plain css with the pseudo class ":hover".
I guess this is how it works on this page, since i can not see any changes in the DOM (like added classes, changed inline style). It can be done like this:
div ul {
display: none;
}
div:hover ul {
display: block;
}
With this css, ul's within div's are displayed once the div is hovered.
Anyways, regarding your question: "hover" does no really trigger a own event (as far as i know), it is more a combination of "mouseenter" and "mouseleave".
Hope this helps.
Edit: I checked the css on the page which proofes my assumption, there is the following css-rule which applies to the menu-point-li:
.header-categories__links-item:hover>.header-categories__links-dropdown
{
display: block;
}
I need to hide the body scrollbar smoothly. I have tried overflow:hidden with transition but it does not work. Thanks in Advance
Unfortunately there is no 'Short and simple' solution to do this. A scrollbar is not an element by itself, so you're going to end up having to make it yourself, and adding the hover or click effect on it or a different element. Fortunately there are other StackOverflow users that have done this before and shared this with us so that we can use this in the future and learn from it. The latter being the main reason of course, since that is what SO is mostly for.
See this JSFiddle.
This fiddle imitates the functionality of Facebook's scrollbar that fades out when you are not hovering over it anymore. All you need to do is make it work with a click() event instead of the hover() event.
I know I'm a bit late but you helped me out so I might as well try to help back haha.
The selector ::-webkit-scrollbar could be modified to have an opacity of 0 and you could apply overflow: hidden at the same time if you wrote it in jQuery or JS. Like add ::-webkit-scrollbar { opacity: 0; transition: all .25s;} whenever you're trying to.
Got the selector from this article.
https://css-tricks.com/custom-scrollbars-in-webkit/
You can use below code to hide scroll bar
This will hide all scrollbars for textareas.
textarea
{
overflow:hidden;
}
You can also use the id or class of the textarea to make it only that one
textarea#txt
{
overflow:hidden;
}
This will hide scroll smoothly as per your need
jQuery('html,body').stop().animate({scrollTop:900 },500,function(){});
I want to highlight an element on hover, and only that element.
This should mimic the behaviour of hovering over an element with chrome dev tools when you have the magnifying glass selected.
It's for a chrome extension I'm making.
I think I need a JS solution, as the pseudo :hover in css seems to apply to all elements in the background, i.e. container elements, so I'd need to prevent event bubbling in css, which as far as I can tell you can't do.
I have tried
$('body').children().mouseover(function(e){
$(".hova").removeClass("hova");
$(this).addClass("hova");
}).mouseout(function(e) {
$(this).removeClass("hova");
});
-css-
.hova {
background-color: pink;
}
and jquery's hover(), both always selects the container too.
I have also tried with css opacity, incase the background was covered, but it seems it always selects the parent element. I want the furthest child down the DOM that I am hovering over.
I'm sure there's some simple solution out there, maybe its over complicating as its in a chrome extension... I'm not sure
Is this what you need? http://jsbin.com/vidojamece/1/
Instead of adding the class to $(this) inside the handler, add the class to e.target (span) and return false so it doesn't bubble up to the div:
$('body').children().mouseover(function(e){
$(".hova").removeClass("hova");
$(e.target).addClass("hova");
return false;
}).mouseout(function(e) {
$(this).removeClass("hova");
});
You need to use the target element instead of 'this', which is the actual element that you hover over and use stopPropagation in order to not repeat the process for each element behind:
$('body').children().mouseover(function(e){
e.stopPropagation();
$(".hova").removeClass("hova");
$(e.target).addClass("hova");
}).mouseout(function(e) {
$(e.target).removeClass("hova");
});
You can do this with css (and js too):
*:hover {
background-color: pink;
}
or even
div:hover {
background-color: pink;
}
In js:
$('body').children().each(function() {
$(this).hover(function() {
$(".hova").removeClass("hova");
$(this).addClass("hova");
}, function() {
$(this).removeClass("hova");
});
});
I've got a text/html slideshow with Javascript however upon cycling of new text I also need the script to trigger the :hover class on the menu item corresponding to the content present in the slideshow.
For a visual example please see: http://i.stack.imgur.com/mkyMJ.png
I've uploaded the JS code to http://pastebin.com/Kp4a7VXP for viewing.
Would really appreciate your help on this guys! :)
Thanks so much!
Kind Regards,
Jake
It may not make sense to try to mimic the hover state, so it may be better to have a css class such as .active added to the element you want the hover state for, and then include the css from the hover state in that class.
I'm assuming you have a CSS like
.item{
/* normal appearance */
}
and
.item:hover{
/* appearance when mouse over */
}
but as far as I know, there's no way to trigger the pseudo class :hover via javascript. But you can use a standard class for this like (but for semantics I would name it like .currentSlide or .activeSlide)
.item:hover,
.item.hover{
/* appearance when mouse over
or selected */
}
and then you can add and remove that class using javascript for the current slide element, like:
currentSlideDiv.classList.add("hover");
EDIT:
You can use a function like this, and call highlightCurrentSlideName(currentContentItem); inside NextClick() and PreviousClick()
function highlightCurrentSlideName(slideIndex){
var slideNameList = jQuery('.contentmenu a');
jQuery(slideNameList).removeClass('current'); //unhighlight all slide names
var currentSlide = slideNameList[slideIndex]; //select a slide name by a numeric index
jQuery(currentSlide).addClass('current'); //highlight that element
}
and add a class on your CSS file, and style it whatever you want.
.contentmenu a.current{
color: lightblue;
background-color: gray;
}
PS: I'm not a jQuery programmer I always write pure javascript, just noticed you have it there already.
I have this demo
However the mouse over when dragged to left or right stops the toogle.
The hover() event didn't solve the problem.
Any idea ?
div.fileinputs {
position: relative;
display: none;
}
#show {
width: 200px;
height: 40px;
background-color: red;
z-index: -2px;
position: absolute;
}
<div id="show"></div>
<div class="fileinputs">Visible Panel Div</div>
$('#show').mouseover(function() {
$('.fileinputs').toggle();
});
Given that you want to simply show the element on mouseover and then hide it on mouseout, you should also use mouseout() to define the desired behavior you want when the mouse is removed:
$("#show")
.mouseover(function(){
$(".fileinputs").toggle();
})
.mouseout(function(){
$(".fileinputs").toggle();
});
Example. (It's choppy because fileinputs is a separate element, and it's not counting hovering over that as hovering over the show div).
But you should use hover, just to make it easier:
$("#show").hover(function(){
$(".fileinputs").show();
}, function(){
$(".fileinputs").hide();
});
Example. (Choppy for the same reason as above).
Since your desired behavior is definite, we'll just use show() for when the mouse is over it and hide() when it is removed.
By the way, it is preferred that you bind events using delegate() (for older versions of jQuery) or on() (for jQuery 1.7+):
$(document).on("mouseover mouseout", "#show", function(){
$(".fileinputs").toggle();
});
Example.
Though, you really should just use CSS for this. You can place fileinputs inside of show and use a child selector:
#show:hover > .fileinputs {
display: block;
}
Example. This one doesn't flicker because the element is inside the one that's getting the hover declarations attached to it, and CSS considers it as though you are still hovering over the parent element (because you technically are, as the target of the hover is within the boundaries of the parent [it would still work if it was outside the boundaries because the element is still nested]).
I think it's because you set your z-index on show to be -2. Once the fileInputs div is visible, it becomes on top of show, and as a result, mouseover for show no longer responds.
If you notice, if you hover from left to right over the red show div, but just below where the text is, the fileinputs div does in fact toggle.
If you add a border around the fileinputs div, the cause of the behavior will be clearer.
See: http://jsfiddle.net/pS9L8/
Moving your cursor over the region where the two divs overlap triggers a mouseover event, showing the hidden fileinputs div. Since that div is now displayed on top of show, your cursor is no longer directly over the original show div. You then continue to move your cursor, and as it moves outside the fileinputs region, that move is seen as another entrance to the underlying show div. Which again triggers the .toggle(), re-hiding the fileinputs div.
One quick fix is to switch to the jQuery custom event mouseEnter instead of mouseover (although you may get some jerky artifacts as jQuery reasons about the meaning of "over"). Depending on what you're trying to achieve, another option would be to reorder the two divs by z-index.