Date : March 29 2020, 07:55 AM
should help you out Using twitter bootstrap. on the site i have a top nav bar consisting of links where some have dd-menus, and some are just static links. , as mentioned in my question, i have the following nav bar items: <ul class="nav nav-pills">
<li class="dropdown" id="hifiMenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="newhifi.png"></a>
<ul class="dropdown-menu">
<li class="mainitem"><a href="newhifi">BY BRAND</a></li>
....
#hifiMenuLink {
width:71px;
height: 11px;
background-image: url(path_to_sprite);
background-repeat: no-repeat;
background-position: 0px -6px;
}
#hifiMenuLink:hover {
width:71px;
height: 11px;
background-image: url(path_to_sprite);
background-repeat: no-repeat;
background-position: 0px -37px;
}
<a id="hifiMenuLink" ...
|
Enable hover event after certain time
Date : March 29 2020, 07:55 AM
this one helps. I would like to disable hover event on an anchor tag via jQuery for a certain interval. , I guess you want something like this: <div id='a' style="border:2px solid black" >
<h3>Hove On me</h3>
For 2000 milliseconds. You will get an alert.
</br>
</div>
$(document).ready(function(){
var delay=2000, setTimeoutConst;
$('#a').hover(function(){
setTimeoutConst = setTimeout(function(){
/* Do Some Stuff*/
alert('Thank You!');
}, delay);
},function(){
clearTimeout(setTimeoutConst );
})
})
|
How do I enable dropdown on hover in vue bootstrap?
Date : March 29 2020, 07:55 AM
will help you Not as straighforward as I thought but here is one example on how to convert this bootstrap-dropdown into a hoverable dropdown. <template>
<div @mouseover="onOver" @mouseleave="onLeave">
<b-dropdown id="dropdown-1" text="Dropdown Button" ref="dropdown" class="m-md-2">
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
</b-dropdown>
</div>
</template>
<script>
export default {
methods: {
onOver() {
this.$refs.dropdown.visible = true;
},
onLeave() {
this.$refs.dropdown.visible = false;
}
}
}
</script>
|
Date : March 29 2020, 07:55 AM
|
Bootstrap hover and click event conflict when used togather to have both hover and click event for menus
Date : March 29 2020, 07:55 AM
|
Boards Message :
Related QUESTIONS :