I have a link that is turned green with the a:hover CSS attribute. When I click the link, this function is triggered:
$("#comment_title_link").toggle(function() {
$(this).text('Done');
},
function(){
$(this).text('Add Comment title');
});
which changes the text of the link. The hover attribute seems to only stop being applied once you cross the border of the element that it's being applied to. However, since I change the text from "Add Comment Title" to "Done", if I have my mouse over on the word "Title" and click, "Done" appears to the left of my mouse since Done is so much shorter than Add Comment Title. Therefore, the :hover attribute is still being applied even when my mouse is not over the link. How can I remedy this issue?
One workaround would be to remove the green color styling via script within your toggle(). And when you leave and come back to hover over that text, it should turn green again.
Easiest way would be to apply hover effect via CSS only on a certain class, and remove that class after switching text:
//in css:
A.greenLink:hover
{
color: green;
}
// script:
$("#comment_title_link").toggle(function() {
$(this).text('Done')
.removeClass('greenLink');
},
function(){
$(this).text('Add Comment title');
});
Ideally, you'd want to figure out why it's happening and if there's anything you can do about it (the "right" way). But if this indeed is a browser redrawing/rendering bug, then perhaps this workaround (as ugly as it is) might help.
add a style for :active undoing the :hover (matching the normal style) when it gets click it will go to the :active style.
Related
I'm working on a project where I append a tooltip to the DOM. When I mouseover an object, the tooltip fades into view. When I leave, the tooltip fades out.
The problem I'm having is, it's still on top of other elements, and thus blocks their mouseover events from firing. Normally, I would just remove the element: d3.select("#theElement").transition().style("opacity",0).remove()
The problem is, I want to be able to re-append it later, upon mouseover. Is there a way to temporarily tack the tooltip somewhere it won't get in the way? Maybe down in the DOM or something? How do most people deal with this problem in D3?
If the issue is that you are blocking mouse over events under the tooltip when it is otherwise invisible, you could set the pointer-events property to none when you need to hide the element (rather than moving the element):
selection.style("pointer-events","none")
Mouse events will now see through this element and the tooltip won't block other "mouseover events from firing"
If the tooltip doesn't have mouse interaction at all, you could just append the tooltip with pointer-events set to none to start (or use css to achive the same result).
But, if the tooltip has mouse interaction, then you can re-set the pointer events attribute when you need mouse interaction on the tooltip again:
selection.style("pointer-events","all")
You have several options:
Set the element's CSS z-index to behind the other elements:
document.getElementById('theElement').style.zIndex = -9999;
Set the element's CSS style visibility to hidden:
document.getElementById('theElement').style.visibility = "hidden";
Edit: originally I suggested changing its display style, but apparently not-displayed still generates events.
Or set a CSS class that hides the element:
document.getElementById('theElement').className += ' hide';
where your stylesheet has:
.hide: { display: none; visibility: hidden }
or you are using an existing CSS framework that has this class (e.g. Bootstrap).
Should be able to accomplish similar with d3:
d3.select('#theElement').style('z-index', -9999);
d3.select('#theElement').style('visibility', 'hidden');
d3.select('#theElement').classed('hide', true);
First off: I'm aware of the jQuery.css() function, but it doesn't work in my case. I'll explain why.
I have a jQuery color picker being used to change the highlighting of a website. I want to apply that color picker to the border of an element which only shows on hover.
The jQuery.css() function only applies the CSS to elements it finds, and does not work on the :hover CSS attribute.
I've tried adding a CSS class which I toggle on the hover, but it comes back to the same problem: I'm trying to change ONLY the hover value.
There's got to be a way to do this, but I've been searching StackOverflow and Google for the better part of an hour now, so I'm invoking xkcd #627
Use the hover event to achieve the same results.
$('selector').hover( function(){
//A function to execute when the mouse pointer enters the element.
$(this).css('property','value');
}, function(){
//A function to execute when the mouse pointer leaves the element.
$(this).css('property','value');
});
I'm adding this as an alternative answer.
If you need to dynamically change your CSS then there is something wrong with your CSS. It's very strange that you need a definition, that you can't toggle with a class and has to be generated dynamically.
Let's say you have a widget that can be in two modes: inactive or active. When it's active elements in it should respond visually to a hover event, when it's not, they shouldn't.
<div id="my-widget" class="my-widget-container">
<div class="element">Something to look at</div>
</div>
CSS
.my-widget-container .element { background-color: #ffffff; }
.my-widget-container.active .element:hover { background-color: #00ff00; }
You switch the mode by:
$("#my-widget").addClass("active");
This will activate the :hover line for the element which now appears interactive.
If I knew more about your situation I could perhaps fix a fitting solution.
Also, jQuery.css is poorly named, perhaps jQuery.style would be a better name since that is exactly what it does.
My document looks like this:
Basically the background is one full-screen, transparent div. There are couple problems...if I just create the background div and don't apply any z-index to it, it ends up being on top of everything, and I cannot click on the box. If I set the z-index of the background div to be below the box, I can't seem to click on the background. What I want to do, it to be able to click both on the box, and the background.
var x = document.getElementById("bg");
x.addEventListener("click",reset,false);
function reset() {
alert("reset was clicked");
}
CLARIFICATION: box is on the same node level as the bg. it is not inside the bg div.
Take a look at this jQuery plugin - even if it doesn't solve your particular question the code could provide insight into your dilemma.
jQuery clickoutside
You must post your code so every one can help you. My test work correctly on Firefox and Chrome. If I'm guessing right, the background in your code isn't expanded. Try to remove html, body { width:100%; height:100%; } in my example to see the problem.
On IE browser, you need to use a transparent gif image as background of the background div, otherwise the background div may be unable to receive mouse click event.
My issue can be seen here - http://jsfiddle.net/aBSyH/3/
I'm using cufon text replacement and think that's the source of the issue.
The link's color should change when you hover in and out of the list item and it's content. But it's behaving quite strangely. It changes back to blue sometimes but generally stay red.
There seems to be something wrong with using cufon text and a selector like -
li.mainmenu:hover a {
color:red;
}
The cufon text does not revert to it's original colour when the mouse leaves the li's hover area.
Any idea why?
I'd prefer to fix the issue without adding any javascript (apart from chaging the cufon initialisation code).
Marjin pointed me in the right direction, if I could up vote his answer again I would.
I really should have read the instructions to begin with - https://github.com/sorccu/cufon/wiki/FAQ#wiki-faq-10
This is how I fixed it -
Cufon.replace('ul#onesite_navigation > li', {
hover: true,
hoverables: { li: true },
ignore: { ul: true },
textless: { li: true }
});
After you click a link on the iphone or ipad, it leaves a simulated mouse hover that triggers the a:hover css styling on that link. If the link has a javascript handler that keeps you on same page, the hover state will not change until you click on another link.
This gets weird if you have an ajax widget that asks questions and each answer is link. When you touch one of the answers, it highlights with the hover state, and then when the question and answers are replaced (using javascript) by a new question and answers, the new answer that appears in the same position as the prior answer has its hover state automatically triggered. I want to prevent that from happening to the new answer link.
Is there any way (maybe some something in javascript) that can give me the same result as the "hover" no longer being above this element?
Notes:
I know I could just have a:hover use the same css styling as a, but a:active styling is hardly noticeable since the active state of a touch click is so brief, so I'm hoping for something that can show the hover state on a link until I replace it with new html
I have tried a variety of approaches in javascript, like calling "blur()" on the dom element and some other stuff, but no luck—I'm starting to think that the best solution is to apply classes to the links on javascript events to manage the hover state myself (or just leave it as it is)
The problem is that when you replace the content in place, Mobile Safari treats the new elements as if they were the old ones, because they occupy the same position in the DOM. One workaround is to remove the old elements first, then add the new elements asynchronously. The simplest way to do this is using setTimeout().
http://jsfiddle.net/chad/JNZvu/10/
// When we click on an answer
$('body').on('click', '.answer', function(){
// don't follow it's link
event.preventDefault();
// fade out the container
$('.container').fadeOut(function(){
// remove old elements (happens after fadeOut because we are in the callback)
$('.container').html('');
// add new elements asynchronously and fade container back in.
setTimeout( '$(\'.container\').html(\'<a class="answer" href="#c">link 3</a><a class="answer" href="#d">link 4</a>\');$(\'.container\').fadeIn();', 0);
});
});
When doing this for real, the fadeOut would be called at the same time as the AJAX function, and then the removal/addition would happen in the AJAX callback.
You can try writing another :hover rule that activates when the parent has a particular class, in effect negating the existing hover rule. The class on the parent would need to be added on touchend and removed on touchstart, so that the default rule could take effect on the next link clicked or touched.
I just solved a similar problem where I want hover styling for list items, but since the parent can scroll with one finger using iscroll, I need to cancel that hover effect as soon as the scroll list moves. It's using jQuery, but you get the idea:
$('ul.scroll').bind('touchmove', function(e) {
$(this).addClass('moving');
});
$('ul.scroll').bind('touchstart', function(e) {
$(this).removeClass('moving');
});
here are my style rules:
ul.scroll li:hover {
background-color: #D1E8DA;
}
ul.scroll.moving li:hover {
background-color: #EFEFEF;
}