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/
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
Looking to bring an effect to my site identical to YouTube. What can I do in the hover of my wrapper div to get the desired effect? I know I can do this with javascript but interested to know if there is a css solution.
#getImageDetails{font-size:13px;}
#getImageDetails a{color:#666;}
#getImageDetails:hover{}
EDIT
This ended up giving me just what I needed! Thank you
#getImageDetails:hover a{color:#113e87;}
#getImageDetails:hover a {
color: ...;
}
It should work.
I believe this might be one of the most common problem that users faces when they uses hover in cufon. Furthermore, there might be tons of solutions, but I have tried to no avail. Please help me. the website that I am having trouble with is [[here]]
jQuery(document).ready(function(){
jQuery('.menubar a').hover(function(){
jQuery('menubar a').css('color','#000000');
Cufon.refresh('menubar a');
},function(){ // this is the mouse out
jQuery('menubar a').css('color','#707070');
Cufon.refresh('menubar a');
});
});
I have also tried several attempt of refreshing the cufon using Cufon.refresh(). The hover still doesnt work. is there another solution or am I missing out something?
You're selecting every .menubar a instead of only the one that was hovered. Try this: (pun intended)
jQuery(document).ready(function(){
jQuery('.menubar a').hover(function(){
jQuery(this).css('color','#000000');
Cufon.refresh(this);
},function(){ // this is the mouse out
jQuery(this).css('color','#707070');
Cufon.refresh(this);
});
});
Not only that, several of your selectors are menubar a when they should be .menubar a (note the .).
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....