I've currently got a functioning footnote popup. But I only want it to fade away only if the user starts to scroll. From a previously asked question it seems that using the onscroll event would be my best shot. I just need help for implementing this specifically to only trigger when the user hovers over the footnote and the span appears. I have pretty much no experience with js on HTML documents, any help would be appreciated.
Current code:
a.footnote span {
z-index: -1;
opacity: 0;
position: fixed;
left: 15px;
bottom: 20px;
margin-left: 0px;
margin-right: 18px;
padding:14px 20px;
border-radius:4px; box-shadow: 5px 5px 8px #CCC;
border:1px solid #DCA;
background-color: #FEF6BB;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
a.footnote:hover span {
z-index: 9;
opacity: 1;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
<a class="footnote" href="#fuente1"><sup id="texto1">[1]</sup><span>Popup footnote</span></a>
That would require javascript.
var footnotes = document.querySelectorAll("a.footnote");
function onMouseEnter(e)
{
for(let i = 0; i < footnotes.length; i++)
{
footnotes[i].classList.toggle("show", e.target === footnotes[i]);
}
}
function onScroll(e)
{
onMouseEnter({});
}
for(let i = 0; i < footnotes.length; i++)
{
footnotes[i].addEventListener("mouseenter", onMouseEnter, false);
}
document.addEventListener("wheel", onScroll, false); //detect mouse wheel
document.addEventListener("scroll", onScroll, false); //detect page scroll, this will not fire if there is nothing to scroll
a.footnote span {
z-index: -1;
opacity: 0;
position: fixed;
left: 15px;
bottom: 20px;
margin-left: 0px;
margin-right: 18px;
padding: 14px 20px;
border-radius: 4px;
box-shadow: 5px 5px 8px #CCC;
border: 1px solid #DCA;
background-color: #FEF6BB;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
a.footnote.show span {
z-index: 9;
opacity: 1;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
<a class="footnote" href="#fuente1"><sup id="texto1">[1]</sup><span>Popup footnote</span></a>
<a class="footnote" href="#fuente2"><sup id="texto2">[2]</sup><span>Popup footnote 2</span></a>
<a class="footnote" href="#fuente3"><sup id="texto3">[3]</sup><span>Popup footnote 3</span></a>
Related
I have a <div> that contains a link.
At the bottom right corner of this <div>, I have an overlay element which takes over the whole <div> when hovered.
This overlay element also contains a link.
My problem is that the link in the overlying element is not clickable.
The problem is because I use pointer-events: none; on class .overlay-content, but if I don't use it, both links become dead.
Please see code here:
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.amg-corner-button_wrap:hover~.overlay-content {
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Also, here is fiddle.
Is there any way that I can achieve this?
can't believe I actually found a pure CSS solution without any drawbacks.
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 400px;
width: 400px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -320px;
bottom: -320px;
width: 400px;
height: 400px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.wrap:hover .amg-corner-button_wrap {
transform: rotate(45deg) scale(4);
}
.overlay-content {
pointer-events: none;
bottom: 0;
color: #333;
left: 0;
opacity: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.wrap:hover .amg-corner-button_wrap ~ .overlay-content {
pointer-events: auto;
opacity: 1;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
-moz-transition-delay: 0.3s;
-o-transition-delay: 0.3s;
-webkit-transition-delay: 0.3s;
transition-delay: 0.3s;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class="wrap">
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
</div> <!-- panel body -->
</div> <!-- panel default -->
JSFiddle
Instead of listening to the :hover event on the corner-button, listen to it on a parent element. Since the :hover will be dispatched regardless of the mouse interaction of the elements' children, it is possible to set pointer-events: auto to the children containing links (overlay-content), once the corner-button has been hovered. Now, that the overlay-content is hoverable and since it's a child of the wrapping div, it will cause the :hover to stay active over the whole wrapping div.
I would recommend using JS style swapping instead of CSS pointer events for this problem. You need to trigger one change to your css when you mouse over the bottom corner, and a separate event when you mouse out of the container. I do not believe CSS gives you that kind of conditional control.
Here is half a solution using animations instead of transitions. This works for when you hover on to the amg-corner-button_wrap but not when you move off it. I'm a bit new to animations so hopefully someone here who knows more maybe able to help you with the second half.
There is also a weird visual in here if you hover on the amg-corner-button_wrap and hover off mid transition. The reason for this is that I added a background color to overlay-content so when it's fading in and you mouse off amg-corner-button_wrap the swipe starts to reverse before the fade is complete.
Anyway, hope this 50% solution helps you or others drive this to 100%! Have to run to a meeting, good luck :-)
#keyframes example {
0% {
visibility: hidden;
opacity: 0;
}
1% {
visibility: visible;
opacity: 0;
}
100% {
visibility: visible;
opacity: 1;
}
}
.panel-default1 {
padding-top: 10px;
border-radius: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
height: 200px;
width: 200px;
overflow: hidden;
margin: 0 auto;
position: relative;
}
.amg-corner-button_wrap {
display: block;
background-color: #e8c63d;
position: absolute;
transform: rotate(45deg);
right: -120px;
bottom: -120px;
width: 200px;
height: 200px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.overlay-content {
visibility: hidden;
opacity: 0;
background-color: #e8c63d;
bottom: 0;
color: #333;
left: 0;
padding: 30px;
position: absolute;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 8px;
right: 0;
top: 0;
}
.overlay-content h2 {
border-bottom: 1px solid #333;
padding: 0 0 12px;
}
.overlay-content~.amg-corner-button_wrap,
.amg-corner-button_wrap:hover {
transform: rotate(45deg) scale(4);
}
.amg-corner-button_wrap:hover~.overlay-content,
.overlay-content:hover {
animation-name: example;
animation-duration: 0.3s;
animation-timing-function: linear;
animation-delay: 0.3s;
animation-fill-mode: both;
}
<div class="panel panel-default1">
<div class="panel-body">
Link
<div class='amg-corner-button_wrap'></div>
<div class="overlay-content">
<h2>Image Ink Logo</h2>
Link
</div>
</div>
<!-- panel body -->
</div>
<!-- panel default -->
Here's a working fiddle for a css and html only change: https://jsfiddle.net/y2auh7gn/4/.
It separates the link from overlay-content and places it where it's supposed to be with position: absolute. We need to move the link out of overlay-content so that when we hover over it the overlay doesn't disappear.
There's a side-effect where the link pops out with the corner piece.
im using flexslider to display a slideshow with thumbnails. recently i added a css code to show an overlay when the thumbnail is hovered. But the problem is when i click on the thumbnail nothing happens.
.flex-control-nav li{
position: relative;
}
.flex-control-nav li img{
position: relative;
z-index: 2;
}
.flex-control-nav li:hover img{
opacity: .5;
}
.flex-control-nav li::after{
display: block;
content: " ";
position: absolute;
width: 100%;
height: 100%;
top: 100%;
background-color: rgba(0, 0, 0, 0.8);
background-image: url(//i.imgur.com/xMS5K4O.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 40px;
z-index: 1;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.flex-control-nav li:hover::after{
top: 0;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
but when i remove the content: " "; block it seems to work or else nothing happens when the thumbnails clicked.
Here is a demo of the slider slider demo
Can someone tell me what am i doing wrong?
Try adding :after to the img element, change li:after to img:after
I would like to dynamically remove or disable a <style> tag
that looks like this
<style type="text/css" id="cssx/portal/simple-sidebar.css" designtr="cssx/portal/simple-sidebar.css">
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
if I have the id or my own defined designtr property, I can't seem to disable or remove it like so:
var id = 'x';
var designtr = 'x';
document.getElementById(id).disabled = true; //doesn't work, throws an error saying element is null
$('style[designtr="' + designtr + '"]').remove(); //doesn't work, although strangely no error thrown
I read somewhere that even with HTML5 style tags can't have a valid id attribute.
All I want to do is either remove or disable a style tag, given some unique id that I have in hand.
Works like a charm:
document.getElementById('remove').onclick = function () {
document.getElementById('styl').remove();
};
<div>Some Div Content</div>
<button id="remove">remove</button>
<style id="styl">div{background-color: red}</style>
$(function() {
$("[id$=css]").remove()
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style type="text/css" id="cssx/portal/simple-sidebar.css" designtr="cssx/portal/simple-sidebar.css">
#wrapper {
padding-left: 0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#wrapper.toggled {
padding-left: 250px;
}
#sidebar-wrapper {
color:blue;
z-index: 1000;
position: fixed;
left: 250px;
width: 0;
height: 100%;
margin-left: -250px;
overflow-y: auto;
background: #000;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
</style>
<div id="side-wrapper">abc</div>
I created a small box while slides to the left and then to the bottom to present the content after hovering the box: http://jsfiddle.net/7n9jxo9c/3/
Now I need to change it in a way, that the box slides to the left and the opens to the top. So the content should be placed above the X.
HTML:
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
Content
</div>
</div>
JS:
$(document).on('mouseenter', '.item', function( event ) {
var menue = $('#item_add');
var item = $(this);
menue.css({ "top": item.offset().top + 35 }).show();
});
CSS:
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
left: 5.5em;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
-webkit-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-moz-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-ms-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
-o-transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
transition: width 200ms ease-in-out 200ms, left 200ms ease-in-out 200ms;
}
#item_add:hover {
width: 7em;
left: .5em;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
#item_add:hover .body {
max-height: 100px;
visibility: visible;
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-ms-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
#item_add .body {
max-height: 0;
overflow: hidden;
visibility: hidden;
-webkit-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-moz-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-ms-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
-o-transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
transition: visibility 0s ease-in-out 200ms, max-height 200ms ease-in-out 0s;
}
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
use Bottom on #item_add:after instead of Top : http://jsfiddle.net/7n9jxo9c/9/
#item_add:after {
content: '';
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
bottom: 5px;
right: -7px;
position: absolute;}
I am not sure if I fully understand your question, but I think you can use bottom attribute instead of top.
I mean something like this:
http://jsfiddle.net/7n9jxo9c/8/
Firstly let me say I'm starting to realize I need to learn jQuery, and while I'm here asking for help, this weekend I'm going to hit the Treehouse jQuery videos hard.
I'd like a little help with an effect I'm trying to create with a navigation menu please, if you take a look at the fiddle I've made:
http://jsfiddle.net/number8pie/kvMkF/4/
As you can see there's a list of navigation links and over them is the text corresponding to the link. What I'd like is for that text to initially not be view-able to anyone except screen readers, and when a user mouse-over's a link the corresponding text slides from behind the leftmost list item into visibility, and the text that says "NAVIGATE" disappears. I'd like all of the text to slide from where it is initially and to the same place, where the "NAVIGATE" text is.
I'm open to the solution being only CSS (don't think its possible with only CSS), jQuery or JavaScript.
Thanks in advance for any help, and I'll make sure to start learning jQuery as soon as I can.
Here's the code:
HTML:
<nav class="main-nav">
<p class="nav-hvr-init">Navigate</p>
<ul> <!-- no closing tag on <li> so that the whitespace between elements is removed-->
<li id="about-us">
<a class="nav-link" href="#"></a>
<span class="nav-text">about us</span>
<li id="products">
<a class="nav-link" href="#"></a>
<span class="nav-text">products</span>
<li id="the-team">
<a class="nav-link" href="#"></a>
<span class="nav-text">the team</span>
<li id="environment">
<a class="nav-link" href="#"></a>
<span class="nav-text">environment</span>
<li id="contact">
<a class="nav-link" href="#"></a>
<span class="nav-text">contact</span>
</ul>
</nav>
CSS:
#nav-row {
background-color: #CCFFCC;
}
#nav-col {
height: 56px;
padding-top: 0;
background-color: #336600;
}
.main-nav {
height: 56px;
margin: 0 auto;
background-color: #336600;
position: relative;
}
.main-nav ul li {
height: 56px;
width: 56px;
margin: 0;
font-size: 21px;
display: inline-block;
text-transform: uppercase;
}
#about-us {
background: #66CC66 url('http://s10.postimg.org/xqx00ofzp/about_us.png') no-repeat center;
}
#about-us:hover {
background: #66CC66 url('http://s10.postimg.org/9borzmh2t/about_us_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#about-us:active {
background: #66CC66 url('http://s10.postimg.org/ekjsxhzhx/about_us_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#products {
background: #33CC33 url('http://s10.postimg.org/defsypb79/products.png') no-repeat center;
}
#products:hover {
background: #33CC33 url('http://s10.postimg.org/y2j1r6lth/products_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#products:active {
background: #33CC33 url('http://s10.postimg.org/6p99iopv9/products_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#the-team {
background: #339900 url('http://s10.postimg.org/4sh4ruol1/the_team.png') no-repeat center;
}
#the-team:hover {
background: #339900 url('http://s10.postimg.org/buf2e1s6t/the_team_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#the-team:active {
background: #339900 url('http://s10.postimg.org/wd9yj4645/the_team_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#environment {
background: #006600 url('http://s10.postimg.org/gb7fcq6et/environment.png') no-repeat center;
}
#environment:hover {
background: #006600 url('http://s10.postimg.org/n47s8zx85/environment_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#environment:active {
background: #006600 url('http://s10.postimg.org/6y6u8m2np/environment_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
#contact {
background: #003300 url('http://s10.postimg.org/9pq3z816d/contact.png') no-repeat center;
}
#contact:hover {
background: #003300 url('http://s10.postimg.org/udordymet/contact_hover.png') no-repeat center;
-webkit-transition: all 350ms ease-in-out;
-moz-transition: all 350ms ease-in-out;
-o-transition: all 350ms ease-in-out;
transition: all 350ms ease-in-out;
}
#contact:active {
background: #003300 url('http://s10.postimg.org/4scje3z79/contact_active.png') no-repeat center;
-webkit-transition: all 50ms ease-in-out;
-moz-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}
.main-nav > ul {
height: 56px;
line-height: 100%;
margin: 0;
position: relative;
float:right;
padding: 0;
}
li > svg {
margin: 9% 0 0 11%;
}
li > a {
display: block;
padding: 0;
margin: 0;
}
.nav-link {
margin: 0;
height: 56px;
}
.nav-text {
color: #FFFFFF;
font-family: 'Arial Black';
font-size: 21px;
position: absolute;
left: 0;
bottom: 0;
}
.nav-hvr-init {
color: #FFFFFF;
font-family: 'Arial Black';
font-size: 21px;
text-transform: uppercase;
line-height: 100%;
margin-right: 4px;
margin-bottom: 0;
position: absolute;
right: 280px;
bottom: 0px;
opacity: 0.2;
}
.txt-arrows {
font-family: 'Arrows';
font-size: 18px;
text-transform: none;
margin-bottom: 3px;
margin-left: 4px;
}
How about that? Is this what you wanted?
I also added sr-only class (from Bootstrap).
http://jsfiddle.net/kvMkF/8/
$( ".nav-link" ).hover(
function() {
var text = $( this ).siblings( "span" ).html();
$(".nav-hvr-init")
.stop()
.animate({right: '0px'},200,function() {
$(this).html(text).animate({right:'280px'},200);
});
}, function() {
$(".nav-hvr-init")
.stop()
.animate({right: '0px'},200,function() {
$(this).html('Navigate').animate({right:'280px'},200);
});
}
);
Quick and easy.
jQuery:
$( ".nav-link" ).hover(
function() {
var ntext = $( this ).siblings( "span" ).html();
$( ".nav-hvr-init" ).html( ntext );
}, function() {
$( ".nav-hvr-init" ).html( "Navigate" );
}
);
Also added display: none; to .nav-text
jsFiddle
$(".main-nav li").hover(function(){
$(".nav-hvr-init").fadeOut();
$(this).find('.nav-text').show().animate({left : '150px'});
}, function(){
$(".nav-hvr-init").fadeIn();
$(this).find('.nav-text').animate({left : '-100%'});
});
here is a fiddle