I have five buttons on one image. Every time you hover over each button, I would like the background image to change according to each button you hover. I tried doing this using CSS, but this doesn't seem to be very effective when applying the "hover" effect. It only works if you hover over the background itself and it will change, but not when you hover over a button.
And if I tried applying the CSS "hover" effect by adding a class in the li section and a sort of image sprite just under the primary background image, the image would only appear within the li itself and not as a background cover.
I figured jQuery/javascript would be better. But, I'm not sure how to apply what I would like. I tried to do a hover action with javascript, but I'm not sure why it isn't working. The following code is snippet from the main code on JSFiddle. Does anyone have suggestions?
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
$('#primary').append($(this));
});
$('#screenprinting').hover(function() {
$('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
}, function() {
$('#primary').css('background', '');
});
});
#mma #primary.hp {
background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
background-position: 43% top
}
<div id="mma" data-trackingposition="mma">
<div id="primary" class="hp clearfix" data-speed="6" data-type="background">
<div class="bucket">
<p style="color:white;">Insure the things you love most...</p>
<p class="title" style="color:white">Select a policy to get a quote</p>
<span id="productheader" role="heading">asdf</span>
<ul class="iconlist">
<li class="attached check" data-prod="au">
<span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>
</li>
<li class="attached property" data-prod="ho">
<span><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </span>
<span class="icon close"></span>
</li>
</ul>
</div>
</div>
</div>
You need to import jQuery library to make things work in jQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
$(document).ready(function() {
//Preload
$('<img/>').hide().attr('src', 'http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg').load(function() {
$('#primary').append($(this));
});
$('#screenprinting').hover(function() {
$('#primary').css('background-image', 'url("http://s3.amazonaws.com/nxs-kxantv-media-us-east-1/photo/2016/03/21/image-jpeg237_35345271_ver1.0_640_360.jpg")');
}, function() {
$('#primary').css('background', '');
});
});
#mma #primary.hp {
background-image: url(https://static.wixstatic.com/media/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg/v1/fill/w_1567,h_611,al_c,q_85,usm_0.66_1.00_0.01/75ac83_423a4fd973804ba7b9f918a46481616b~mv2.jpg);
background-position: 43% top
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mma" data-trackingposition="mma">
<div id="primary" class="hp clearfix" data-speed="6" data-type="background">
<div class="bucket">
<p style="color:white;">Insure the things you love most...</p>
<p class="title" style="color:white">Select a policy to get a quote</p>
<span id="productheader" role="heading">asdf</span>
<ul class="iconlist">
<li class="attached check" data-prod="au">
<span><a id="screenprinting" href="#" aria-expanded="false" aria-label="Auto insurance" style="color:white;"><small><img src="https://static.wixstatic.com/media/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_a3a5ee1aa8d6493abf7e20d1088719d7~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Auto</a></span>
</li>
<li class="attached property" data-prod="ho">
<span><small><img src="https://static.wixstatic.com/media/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png/v1/fill/w_600,h_600,al_c,usm_0.66_1.00_0.01/75ac83_141f12dd5fc848b08fe41f79eded1260~mv2_d_1208_1208_s_2.png" class="insurance-img"></small>Home </span>
<span class="icon close"></span>
</li>
</ul>
</div>
</div>
</div>
Related
I am trying to change the background image for a section when a link is hovered, the image leaving on mouse out, leaving the default section image. While I am very proficient in html, css, and some php, I am not in JS.
I have looked though multiple answers on here but none seem to work.
I have tried
Change background image on link hover
And also
Change Background image of div on navbar hover
My HTML Structure is like so - I am using Advanced custom fields (for the first time) so my structure is a bit different then I would usually have.
<div class="projects-section">
<div class="stacked-project-list-item">
<h3>
<p>
<a id="project-a" class="project-a-class" href="link">Project A</a>
</p>
</h3>
</div>
<div class="stacked-project-list-item">
<h3>
<p>
<a id="project-b" class="project-b-class" href="link-2">Project B</a>
</p>
</h3>
</div>
</div>
and so on up to 5 links.
Currently the JS I have is
$(document).ready(function(){
$("a.project-a-class#project-a").mouseover(function(){
$(.projects-section).css("background-image", "url('/wp-content/uploads/2019/07/project-A.jpg')");
});
});
But it doesn't work.
On a final note - I am using underscores for the first time and have not linked up any jquery library scripts - do I need to add these for this to work? If so, what is the best way to add these in Wordpress.
Thanks
In the selector $(.projects-section), quotes are missing. In the selector a.project-a-class#project-a you can select element with id i:e a.#project-a, className is not required.
const defaultImg = "https://placeimg.com/640/480/nature";
const newImg = "https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg";
$('a#project-a')
.on('mouseover', function() {
$('.projects-section').css('background-image', "url(" + newImg + ")");
})
.on('mouseout', function() {
$('.projects-section').css('background-image', "url(" + defaultImg + ")");
});
.projects-section {
background-repeat: no-repeat;
background-size: 100%;
background-image:url("https://placeimg.com/640/480/nature");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="projects-section">
<div class="stacked-project-list-item">
<h3>
<p>
<a id="project-a" class="project-a-class" href="link">Project A</a>
</p>
</h3>
</div>
<div class="stacked-project-list-item">
<h3>
<p>
<a id="project-b" class="project-b-class" href="link-2">Project B</a>
</p>
</h3>
</div>
</div>
You can use CSS, to preload image and avoid lag of first loading image after hovering link
$('a#project-a').hover(function() {
$('.projects-section').toggleClass('hovered');
})
.projects-section {
background-repeat: no-repeat;
background-size: 100%;
background-image:url("https://placeimg.com/640/480/nature"), url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg");
}
.projects-section.hovered {
background-image:url("https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg");
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="projects-section">
<div class="stacked-project-list-item">
<h3>
<p>
<a id="project-a" class="project-a-class" href="link">Project A</a>
</p>
</h3>
</div>
<div class="stacked-project-list-item">
<h3>
<p>
<a id="project-b" class="project-b-class" href="link-2">Project B</a>
</p>
</h3>
</div>
</div>
I have a mobile menu, and when the user clicks the span with the class of "open", the next footer-menu-accordion opens. However, it also opens when the user clicks on the anchor link "level-1" Men.
What I am trying to do right now, is when the user clicks Men I would like to use jquery to find the NEXT footer-menu-accordion and keep it as display:none (which is the parent div containing the level-2 anchor tags). I know I have to use jquery's next() or find() methods, but I'm not sure how to do it. Can anyone help me out?
function mobileMainNav() {
$('a.level-1.direct').click(function(e) {
window.location = $(this).attr('href');
});
}
mobileMainNav();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mobile-menu" class=" footer-menu-accordion ">
<div class="dropdown-container ">
<a class="level-1 direct">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion ">
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
<a class="level-2 "></a>
<ul></ul>
</div>
</div>
I wrote this so when I click on level-1, I am directed to the "mens" section of my website. This works fine, however when I clicik level-1 I do not want the next dropdown to open, which it currently does. So I know I need to add some more jquery into this function to do so, I'm just not sure how as I am new to jQuery. Thank you in advance!
I'm not sure if you want to get the nearest footer for your anchor tag with the class level-1 or not ... if so try this :
function mobileMainNav() {
$('a.level-1').click(function(e) {
var nearestFooter = $(this).parent().siblings('div.footer-menu-accordion');
console.log(nearestFooter[0]);
});
}
mobileMainNav();
<div id="mobile-menu" class="footer-menu-accordion">
<div class="dropdown-container">
<a class="level-1">Men</a>
<span class="open">img</span>
</div>
<div class="footer-menu-accordion">
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
<a class="level-2"></a>
<ul></ul>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
also you don't have element with the class (.direct)
My markup is
<div class="info-container">
<span class="item1">item1</span>
<a class="item2" href="#">item2</a>
<a class="item3" href="#">item3</a>
</div>
I want to rearrange to below when my media width gets to 800 px (#media (min-width: 800px))
<div class="info-container">
<a class="item2" href="#">item2</a>
<span class="item1">item1</span>
<a class="item3" href="#">item3</a>
</div>
I have only used angularjs so far for my application (the above code is in a view attached to a controller). What is the best way to achieve this? Should I use angularjs to do this?
Or is the only way to do this using JS or JQuery inside my controller? I dont want to use a flexbox solution.
There is a great article about this problem here:
http://www.jtudsbury.com/thoughts/rearrange-div-order.php
A simple solution would be to duplicate the span.item1 after a.item2 and have display:none; on it. When the width is above 800px you would display it and hide the first span.
So you would have:
<div class="info-container">
<span class="item1">item1</span>
<a class="item2" href="#">item2</a>
<span class="item1" style="display:none;">item1</span>
<a class="item3" href="#">item3</a>
</div>
<style>
#media (min-width:800px){
.info-container .item1
{
display:block;
}
.info-container:first-child
{
display:none;
}
}
</style>
this any good ? ## Edit Doesn't work on SO snippet for some reason, fiddle added
JS FIDDLE
$( window ).resize(function() {
if( $('document').width() <="800"){
var span=$('span.item1');
span.remove();
$('a.item2').append(span);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="info-container">
<span class="item1">item1</span>
<a class="item2" href="#">item2</a>
<a class="item3" href="#">item3</a>
</div>
I have button icon this.. at click event i want to change it as it .. right now i am applying this code for jquery
<script>
$('div[id^="module-tab-"]').click(function(){
$(this).next('.hi').slideToggle();
});
</sript>
what should change to change left cursor arrow to right cursor arrow in jquery? please help me with code
You can use toggleClass to swtich between two images. Assign each image to a class and switching between classes using toggleClass will change the image on click.
Live Demo
$('div[id^="module-tab-"]').click(function(){
$(this).next('.hi').toggleClass("left-image right-image");
});
here is working demo of your problem
i create a active class which change background-image.
toggling active class fullfill your requirement
here is your css
.tab {
background: url('http://i.stack.imgur.com/dzs9m.png') no-repeat;
padding-left:50px;
}
.tab.active {
background: url('http://i.stack.imgur.com/euD9p.png') no-repeat;
}
.hi {
display:none
}
and here is your JS
(function(){
$('div[id^="module-tab-"]').click(function(){
$(this).toggleClass("active").next('.hi').slideToggle();
});
}());
hey #Jeetendra Chauhan thanx but still not get what i want.. here is anther code of html..
<div id="tab-module-row" style="display:none;">
div class="module-row module-tab module-details pull-right">
<b>Details:</b>
<span class="grey-line"></span>
<div id="module-tab-details" class="hello-sugg">
<img src="images/icons/icon-orangeboxarrow-right.png" class="right"> Some error is here <span class="pull-right">
<img src="images/icons/icon-chat.png" data-toggle="modal" data-target="#commentBox">
<img src="images/icons/icon-alert.png"> </span>
</div>
<div class="hi" id="hi1" style="width: 95%;display:none;">
<span class="grey-line"></span>
<b>Suggested steps:</b><br>
<ol>
<li>Step one to resolve the issue. Try this one first!</li>
<li>Second Step to resolve the issue. Try this one first!</li>
</ol><br>
<img src="images/icons/icon-charcoalarrow.png"> Add Comments<br>
<img src="images/icons/icon-charcoalarrow.png"> Update / Test Data<br> <br>
</div>
<span class="grey-line"></span> </div>
</div>
I am trying to make a button appear on hover and disappear when the mouse moves away from the object. There are lots of posts, like you might find on the Twitter feed but I only want the button to appear on the post you're hovering over, not all of them. Here is my code:
$(".posts").hover(function() {
$(this).find("article .report-post").css('visibility', 'visible');
$(this).find("article .report-post .report-btn").css('visibility', 'visible');
}, function () {
$(this).find("article .report-post").css('visibility', 'hidden');
$(this).find("article .report-post .report-btn").css('visibility', 'hidden');
});
What am I doing wrong? If I do this, nothing happens:
$("article").hover(function() {
$(this).find(".report-post").css('visibility', 'visible');
$(this).find(".report-post .report-btn").css('visibility', 'visible');
}, function () {
$(this).find(".report-post").css('visibility', 'hidden');
$(this).find(".report-post .report-btn").css('visibility', 'hidden');
});
Is that perhaps because there are lots of <article>s on the webpage?
EDIT: Here is the HTML of one of the <article>s:
<article class="single-post">
<div class="profile-pic">
<a href="tg">
<div style="background-image:url(example.jpg);background-size:cover;width:70px;height:70px;"></div></a>
</div><!-- profile-pic -->
<div class="text">
<h5 class="tg" id="CMfQ34erT6-author">Tristram Gale</h5><a class="report-post" href="#" id="CMfQ34erT6" style="visibility: hidden;">
<div class="report-btn" style="visibility: hidden;"></div></a>
<p class="post-text">LALALALALALALALALALALA</p>
<div class="details">
<ul>
<li style="text-overflow: ellipsis;width: 170px;white-space: nowrap;overflow: hidden;">
Devonport High School for Boys
</li>
<li style="list-style: none; display: inline">
<a href="post.php?id=CMfQ34erT6">
<ul>
<li title="2013-07-02 21:16:57">about 15 hours ago</li>
</ul>
<ul class="comments" id="CMfQ34erT6">
<li>
0 comments
</li>
</ul></a>
</li>
</ul>
</div>
<div class="comments-box" id="CMfQ34erT6-box" style="display: none;">
<div id="CMfQ34erT6-comment-box">
<ul>
<li class="CMfQ34erT6-new-comment">
<form class="CMfQ34erT6-form" id="CMfQ34erT6" name="CMfQ34erT6">
<input autocomplete="off" id="newCommentText" placeholder="Write a comment..." type="text"><input id="addcomment" onclick="return postComment(this.form.id, this.form.newCommentText.value)" type="button" value="Post">
</form>
</li>
</ul>
</div>
</div>
</div><!-- text -->
<div class="clear"></div><!-- clear -->
</article>
Thanks
If you are not planning to use the hover() functions for something else in Javascript you can do it completely in CSS.
Remove the style="visibility: hidden;" attributes from the button and link and add this to your CSS:
article .report-post {
visibility: hidden;
}
article:hover .report-post {
visibility: visible;
}
The button will only be visible as long as the cursor is over the article.
jsfiddle is online again: http://jsfiddle.net/GeraldS/6MQv7/
Okay, I've tested this on jsfiddle but their server is down now - see http://www.isitdownrightnow.com/jsfiddle.net.html
In HTML change the style attribute from visibility:hidden to display:none for div and a as well.
And then the following code works:
$(".posts .single-post").hover(function() {
$(this).find(".report-post").show();
$(this).find(".report-btn").show();
}, function () {
$(this).find(".report-post").hide();
$(this).find(".report-btn").hide();
});
Try these things:
Make sure you've put the hover() function inside document.ready()
There was no text inside the class .report-btn. Make sure you can see the button, when everything is set to visible.
There is no need of the .find, make it simple...
for eg, try this code:
$(function() {
$('article').hover(function() {
$(".report-post").css('visibility', 'visible');
$(".report-post .report-btn").css('visibility', 'visible');
}, function () {
$(".report-post").css('visibility', 'hidden');
$(".report-post .report-btn").css('visibility', 'hidden');
});
});
If it still doesn't work, try the "display:none" and the "display:block" instead of the "visibility"