Viewing Hover Element

  1. Portal Home
  2. Forum
  3. EverWeb
  4. How do I...?

Hover Element



User: Les C. 8 years ago
My code which should display a picture when hovered on doesn't work in EverWeb—but it does display properly when tested using a code checker.

Any ideas why the pictures don't appear?


HTML
<div class="nav-wrap">
<div class="img-place"></div>
<div class="nav">
<ul>
<li><a href="#" data-target="bg1">TEST1</a></li>
<li><a href="#" data-target="bg2">TEST2</a></li>
<li><a href="#" data-target="bg3">TEST3</a></li>
</ul>
</div>
</div>

CSS
<style>

.nav-wrap {
width: 100%;
height: 775px;
background: #111;
position: relative;
}

.nav-wrap .img-place {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 5;
}

.nav-wrap .nav li {
font-family: 'HelveticaNeue';
position: relative;
z-index: 6;
}

.nav-wrap .nav li a {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}

.nav-wrap .nav:hover li a {
opacity: 0.3;
}

.nav-wrap .nav li a:hover {
opacity: 1;
padding-left: 45px;
font-weight: 600;
}

.nav-wrap .bg1 {
background-image: url(http://www.photography-match.com/views/images/gallery/Ghandrung_Village_and_Annapurna_South_Nepal_Himalaya.jpg);
background-size: 130%;
opacity: 0.4;
animation: bgani 20s linear;
}

.nav-wrap .bg2 {
background-image: url(http://lh5.ggpht.com/_nFOgRvQfbY4/SqDwU31NB8I/AAAAAAAAATE/Jo1zuHhJaDA/s1600/IMG_4278.JPG);
background-size: 130%;
opacity: 0.4;
animation: bgani 20s linear;
}

.nav-wrap .bg3 {
background-image: url(http://travspire.com/wp-content/uploads/2013/06/Glimpse_of_hampi_main.jpg);
background-size: 130%;
opacity: 0.4;
animation: bgani 20s linear;
}

@keyframes bgani {
0% {
opacity: 0;
background-size: 100%;
}
15% {
opacity: 0.4;
}
100% {
background-size: 130%;
}
}

</style>

JS (pasted into the header)
<script src="js/all.min.js">
$('.nav li a').hover(function() {
$('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());

</script>
User: Jumbo T. 8 years ago
Js is missing a part. Should be this :

<script src="js/all.min.js">

<script>

$('.nav li a').hover(function() {
$('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());

</script>
User: Jumbo T. 8 years ago
And add list-style:none to this part :

.nav-wrap .nav li {
font-family: 'HelveticaNeue';
position: relative;
z-index: 6;
list-style: none;
}

Then you won't see the dots.
User: Les C. 8 years ago
--Jumbo

Thanks for the feedback.

Dots are gone (I appreciate that).

The hover feature, however, is still not displaying the image for me in EverWeb.

Any other ideas why?


L C
User: Les C. 8 years ago
--Jumbo

Also, any idea why I am getting about a 16px white band at the top of the element's window?


Thanks,

L C

Last edit 8 years ago
User: Roddy 8 years ago
When you have questions about creating code you will probably get more help if you post in an appropriate forum - then post here if it doesn't work in EverWeb.

Your background image URLs should be enclosed in double quotes to get them to work in EverWeb.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Roddy
I will check out the forum. Thanks.

Regarding the hover issue, it still didn't work.

Here is an example with a local image:

.nav-wrap .bg1 {!-ASSETSPATH-!}"Images/Gallery%204.jpg";
background-size: 130%;
opacity: 0.4;
animation: bgani 20s linear;
}


L C
User: Roddy 8 years ago
Your example has no selector for the background or background image.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Les C. 8 years ago
--Roddy

Thanks for the response.

This is what I am using in the HTML snippet:

<li><a href="#TEST1" data-target="bg1">TEST1</a></li>

Isn't this enough to identify the bg1 image?


L C
User: Roddy 8 years ago
It would depend on the context. I would need to see all the code.

Why not create a test page using a code editor, publish it and post the URL?

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Jumbo T. 8 years ago
The code is at the top of the page and in the other replies.

If you look carefully, you can see it.

For your convenience I put it on the server :

http://trotter.hol.es/hover/

One of the images was 5.5MB. So I resized it. Now it display faster when you hover the text.
User: Les C. 8 years ago
--Jumbo

Thanks for the post.

I pulled your code and put it into an HTML snippet in EverWeb—the images don't display during a hover.

Any thoughts why?

Here is the code I brought over from your URL:


<div class="nav-wrap">
<div class="img-place"></div>
<div class="nav">
<ul>
<li><a href="#" data-target="bg1">TEST1</a></li>
<li><a href="#" data-target="bg2">TEST2</a></li>
<li><a href="#" data-target="bg3">TEST3</a></li>
</ul>
</div>
</div>

<style>

.nav-wrap {
width: 100%;
height: 775px;
background: #111;
position: relative;
}

.nav-wrap .img-place {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0;
z-index: 5;
}

.nav-wrap .nav li {
font-family: 'HelveticaNeue';
position: relative;
z-index: 6;
list-style: none;
}

.nav-wrap .nav li a {
display: block;
color: #FFFFFF;
text-decoration: none;
font-size: 48px;
text-transform: uppercase;
font-weight: "Thin";
letter-spacing: 0px;
margin: -12px;
padding: 0px 0px 0px 70px;
transition: all 0.5s ease-in-out;
}

.nav-wrap .nav:hover li a {
opacity: 0.3;
}

.nav-wrap .nav li a:hover {
opacity: 1;
padding-left: 45px;
font-weight: 600;
}

.nav-wrap .bg1 {
background-image: url(Ghandrung_Village_and_Annapurna_South_Nepal_Himalaya.jpg);
background-size: 130%;
opacity: 0.4;
animation: bgani 20s linear;
}

.nav-wrap .bg2 {
background-image: url(IMG_4278.JPG);
background-size: 130%;
opacity: 0.4;
animation: bgani 20s linear;
}

.nav-wrap .bg3 {
background-image: url(Glimpse_of_hampi_main.jpg);
background-size: 130%;
opacity: 0.4;
animation: bgani 20s linear;
}

@keyframes bgani {
0% {
opacity: 0;
background-size: 100%;
}
15% {
opacity: 0.4;
}
100% {
background-size: 130%;
}
}

</style>

<script src="jquery.min.js"></script>

<script>
$('.nav li a').hover(function() {
$('.img-place').toggleClass($(this).data('target'));
});
$('.nav-wrap .img-place, .nav-wrap').height($(window).height());

</script>
User: Roddy 8 years ago
I tested your code in an HTML editor and it works OK - at least I think it does as I don't actually know what the end result should be!

You need a link to jQuery...

<script type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Just make sure you don't use any widgets that require jQuery on the same page.

As I pointed out before, you should enclose the relative path to the images in quotes ...

background-image: url("{!-ASSETSPATH-!}Images/Glimpse_of_hampi_main.jpg");

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
✔ Best Answer  
User: Les C. 8 years ago
--Roddy

Thanks. That nailed it.


L C
User: Les C. 8 years ago
    

Last edit 8 years ago


Post Reply
You must login or signup to post.