is there any way to use "hover" attribute for all html elements instead of just '' in IE?
for example 'li:hover' . it doesn't work in IE6 . (i don't know about other versions of IE).
Edited:
i just want to do it with CSS no javascript.
it is a simple menu.
No, IE6 didn't properly implement the :hover pseudo-class for all elements. It only supports it for anchors.
I don't think there is anyway that you can do it without javascript in IE 6.
If it is a one level menu, you might be able to tweak the styling to make the links render as display:block inside of the li so you can perform hovers on them, and if needed put spans inside the links for extra styling flexibility, but personally never had much luck trying to extend that to multi level menus.
A strategy of graceful degradation may be your best bet there.
Use onmouseover/onmouseout with javascript.
When you mouseover an element you simply show a hidden div with your hover contents.
When you mouseout of an element you will then hide the div with you hover contents.
Jquery makes this easier if you dont want to do all the leg work
<span id="hoverSpan" class="hoverelement" hoverdata="this is my hoverdata">HoverSpan</span>
HoverAnchor
<div id="hoverdiv" style="display:none"></div>
<script language="javascript">
$(document).ready(function () {
$(".hoverelement").each( function () {
var myelement = $(this);
myelement.mouseover( function (e) {
var myhovertext = myelement.attr("hoverdata");
$("#hoverdiv").html(myhovertext).show();
});
myelement.mouseout( function (e) {
$("#hoverdiv").html(myhovertext).hide();
});
});
});
</script>
Its late and I did not test this, but the idea is there. Basically you would make a hover for any element with the class "hoverelement"
try jquery...i don't know exactly but it might work in IE6....
Related
Here is a Fiddle, to show my current state: (attempting onClick())
http://jsfiddle.net/D5N4f/7/
$('.associationLinks').click(function () {
alert("I've been clicked"); //test to see if click is working
//$(this).next().toggle();
$(this.content).toggle();
//$(this .content').css("display", "block");
});
here is a version of the working HOVER, that I need to convert to onClick:
http://jsfiddle.net/D5N4f/6/
This is working fine.. however.. on HOVER is just not practical for my use.. I need to change it to onClick..but have the same behavior.
Do I need to use jQuery for this? (I havent been able to get it to work)
the content I want displayed starts off as display:none..
I have tried to show(), toggle() and even .css("display", "block"); (maybe Im not targeting things correctly?)
the last part of this (since there will be MANY links set-up like this) is to close the previous 'SHOW' content.. when I click on a new link.. (ie: only having one content box displayed at a time vs. having several open at same time!)
Please use the fiddle example instead of just random code suggestions! Thanks!
I removed the following CSS:
/*.associationLinks:hover .content {
display:block;
}*/
I also use a .children() selector to get the content div to display, and I change it's CSS on a click.
Is this closer to what you want? Hiding the image is a bit tricker, and I have an idea for that but I'm not sure if you need it.
I'm using bootstrap for UI Design. I have configured updated IntroJS to my site.
Now it works fine with other elements but giving problem with Dropdown Menu Elements.
hey man make sure your jquery link placed first then write javascript link
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Check the Console. Most likely jQuery was not referenced, in which case you need to include it before IntroJS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
A bit late to the party but for anyone googling:
The dropdown menu UL has introjs-fixParent added to it, for me this caused my menu to appear behind other elements on the page, so I fixed that by doing a z-index: 1000!important on the UL. Intro.js adds introjs-showElement on the element to be shown, which has a really high z-index. The problem here is the parents z-index is lower than the mask so any children are always behind the mask.
My fix was to remove the z-index: 1000!important on the UL and put the other elements behind my menu.
I've had the same issue and I manage to resolve it, I posted an explanation there:
use intro.js on bootstrap dropdown element
Hope these help.
EDIT: Added snippet of code and explanation from link
I found a workaround, it's quite ugly, but does the job:
$scope.ChangeEvent = function (e) {
if (e.id === 'step2') {
document.getElementById('step1').click();
setTimeout(function () {
document.getElementById('step2').style.display = 'block';
}, 500);
}
console.log("Change Event called");
};
I set the display attribute to block just after the click event I added in the change event
When clicking executing the click on the element 1, I noticed that jquery set the state of the style.display of the element 2 to '', so I wait a bit after clicking in order to set it back to 'block', I know it's ugly, but I didn't find anything better at the time
http://jsfiddle.net/b4fwQ/
Hi all. The link above goes to a jsFiddle example of where i have got to thus far. What i am trying to accomplish is that which ever <li> has the selected class on it will shows its child. Now this is working as above, but once you start moving your mouse around the "selected" border needs to become white as you are now looking at a different page.
How can the css be changed?
thanks.
Chris
With the current HTML markup I'm not sure this is possible with pure CSS. But a bit of jQuery can get the desired effect:
$(function(){
var selectedLi = $("#navigation ul#home-nav li.grey");
$("#navigation ul#home-nav").hover(function(){
selectedLi.removeClass("selected");
}, function(){
selectedLi.addClass("selected");
});
});
See Demo: http://jsfiddle.net/b4fwQ/1/
I'm trying to change an entire page's body's background color, when a user hovers over a thumbnail on that page (the thumbnail being in a div within body). Is there any way to do so using only CSS?
Answer: NO.
You would have to go up, select the div's parent and then the div's parent parent... until you get to the body. There is no way to select an element's parent using only CSS (if you'd like to know why, this article may prove useful)... yet (there will be a parent selector in CSS4, however).
JavaScript is the way to go if you want to do this and it's quite easy.
If you have something like this:
<div class='change-bg'></div>
in your HTML, then the JavaScript is simply:
var el = document.querySelector('.change-bg');
el.addEventListener('mouseover', function(){
document.body.style.backgroundColor = 'red';
}, true);
el.addEventListener('mouseout', function(){
document.body.style.backgroundColor = 'black';
}, true);
demo: http://jsfiddle.net/thebabydino/TDSUL/
If you're using jQuery, it gets even easier:
$('.change-bg').hover(function(){
$('body').css({'background': 'red'})},
function(){
$('body').css({'background': 'black'})
});
demo: http://jsfiddle.net/thebabydino/YWDeA/
Its not possible. Just go with JS, like example:
<div data-bgcolor="red"><div>
$("div").mouseover(function(){
$("body").css("background-color", $(this).attr("data-bgcolor"));
})
Not as such, no. You can change descendants' attributes but not ancestors' via CSS selectors. XPath would allow such things but that's not possible in CSS. So I guess you need to resort to JavaScript in this case.
I want a solution for tag:hover that is not working on ie6. My guess is it has to be done with javascript.
I found this patch: csshover3.htc (http://www.xs4all.nl/~peterned/csshover.html), I checked it's demo! and i didn't work on my ie6 browser!
There has to be an elegant way to solve this very BIG and basic problem, may be a jquery plugin.
Any lead is appriciated
Using jQuery you would be able to use the hover function (http://docs.jquery.com/Events/hover) to add a class on hover.
example:
$("li").hover(
function () {
$(this).addClass('ie6-hover');
},
function () {
$(this).removeClass('ie6-hover');
}
);
You could then make the class have the same properties.
li:hover, li.ie6-hover {
text-decoration: underline;
}
A short jQuery Plugin does it for me
IE6TableHover: function()
{
if(jQuery.browser.msie && /6.0/.test(navigator.userAgent))
{
$(this).hover(
function(){
$(this).addClass('jshover');
}, function(){
$(this).removeClass('jshover');
});
}
}
required jQuery Version here 1.2.6 for 1.3.x you have to change the browser check.
If you're talking about mouseover on non anchor tags, you could use jQuery to add an event handler to catch mouseover events.
Might not be applicable for your context, but you could always just make a point of having your a elements be given the hover effect. For example, in a navigational ul>li>a list, style the a elements with display:block and style them, rather than the lis.
There's Google's ie7-js, but I'm not sure if it addresses anything other than transparent-png issues.
Visibility inherit offers this alternative that directly addresses the mouseOver/:hover problem.