I am curently working on one Javascript to show hover when mouseover.
Here is my Javascript code:
<script>
$(document).ready(function(){
$('.playlogo').mouseover(function () {
$('.company-image-overlay').show();
}).mouseout(function () {
$('.company-image-overlay').hide();
});
});
</script>
Here is my html:
<li class="playlogo"><img src="./uploads/player_thumbs/[blkfeatured_videos.video_id;block=div].jpg" title="<!--[blkfeatured_videos.title;htmlconv=no;ope=max:50;maxhtml;block=div;comm]-->"/><div class="company-image-overlay"></div></li>
I have many <li class="playlogo"> elements on this page.
Here is the CSS code:
.company-image-overlay {
width: 160px;
height: 160px;
background: transparent url(/images/play.png) no-repeat;
border-radius: 15px;
z-index: 1;
opacity: 0.5;
position: absolute;
top: 0.5em;
}
The problem now is that when i mouseover one <li class="playlogo"> it shows the hover efect on all other elements with <li class="playlogo">.
The question is - How i can make the Javascript show hover only on the one element on which i hover with my mouse at the moment?
Thanks in advance!
You need to refer to this and get its children :
$(this).find('.company-image-overlay').show();
Might be able to accomplish this with CSS
.company-image-overlay{
display:none;
}
.playlogo:hover .company-image-overlay{
display:inherit;
}
You need to reference the specific .playlogo that you're hovering, and then use .children() to traverse from within that context. * I'm using .children() because we're only traversing one level. Here's a working example:
http://jsfiddle.net/jr6Vn/
$('.playlogo').each(function() {
$(this).mouseover(function() {
$(this).children('.company-image-overlay').show();
});
$(this).mouseout(function() {
$(this).children('.company-image-overlay').hide();
});
});
Related
I have several div elements aligned in a grid. I want them to have their specific different background images when the user hovers over them which disappear when the mouse leaves the div. Basically it's a users information page where every square has the data of a user. When people hover over the squares, the users' images appear as background images. Here's the HTML:
<div class="contributor">
Some great stuff here
</div>
Here's the jQuery code I'm currently using. The problem: It assigns the same image to every div while I want different images for each div.
$(document).ready(function(){
$('.contributor').mouseenter(function(){
$(this).addClass('visible');
});
$('.contributor').mouseleave(function(){
$(this).removeClass('visible');
});
});
Here's the code for the 'visible' class:
.visible{
background-image: url('../res/dev-1.png');
}
Why do you use jQuery? use just CSS and pseudo-class :hover.
.contributor:hover{
background-image: url('../res/dev-1.png');
}
apply for diffrent div:
.contributor.diff-div:hover{
background-image: url('../res/dev-2.png');
}
If you can do something in the CSS, it is almost always it will be a better solution than using JavaScript
First, save the image url in an attribute named "imageurl" (which isn't parsed by the browser):
<div class="contributor" imgageurl="../res/dev-1.png"></div>
<div class="contributor" imgageurl="../res/dev-2.png"></div>
Then, use this jQuery code:
$('.contributor').mouseenter(function(){
var imgageUrl = $(this).attr("imageurl");
$(this).css("background-image" , imgageUrl);
});
$('.contributor').mouseleave(function(){
$(this).css("background-image" , "none");
});
Of course, you also have to build the HTML dynamically.
may be you can consider css function instead of addClass.
$(document).ready(function(){
$('.contributor').mouseenter(function(){
if(this.id == "one")
$(this).css("background-image" , "url('../res/dev-1.png')");
else if(this.id == "two")
$(this).css("background-image" , "url('../res/dev-2.png')");
});
$('.contributor').mouseleave(function(){
$(this).css("background-image" , "none");
});
});
Try this with jquery. suppose you have six images from dev-1.png to dev-6.png then it will set them as bacground for div number 1 to 6 respectively
$(document).ready(function(){
$('.contributor').mouseover(function(){
var index = $("div").index(this);
index++;
var bI= "background-image:url('../res/dev-"+index+".png');";
$("this").eq(index).attr('style',bI);
});
$('.contributor').mouseleave(function(){
var index = $("div").index(this);
index++;
var bI= "background-image:none";
$("this").eq(index).attr('style',bI);
});
});
For reference (Too troublesome and Won't apply if you have a ton of elements)
This can be achieved with pure CSS.
images might take a second to load (random image services)
Working example: (not responsive open in full page)
.optionlist li {
background: #111;
color: #999;
padding: .5em;
list-style-type: none;
border: 1px solid;
max-width: 70px
}
.optionlist li:hover {
background: red;
}
.optionlist li:hover:after {
content: '';
width: 800px;
height: 600px;
position: fixed;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Start Background Control */
#red:after {
background: url(http://lorempixel.com/800/600/)
}
#blue:after {
background: url(http://lorempixel.com/800/601/)
}
#green:after {
background: url(http://lorempixel.com/801/600/)
}
#yellow:after {
background: url(http://lorempixel.com/801/601/)
}
#orange:after {
background: url(http://lorempixel.com/799/600/)
}
#white:after {
background: url(http://lorempixel.com/800/599/)
}
#black:after {
background: url(http://lorempixel.com/801/599/)
}
/* End Background Control */
<div class="optionlist">
<ul>
<li id="red">Red</li>
<li id="blue">Blue</li>
<li id="green">Green</li>
<li id="yellow">Yellow</li>
<li id="orange">Orange</li>
<li id="white">White</li>
<li id="black">Black</li>
</ul>
</div>
I am making a map area + svg interactive map. The svg part appears when I hover over big region like EU. But everytime I hover over text or border it disappear. Does anybody know how to solve this?
CSS:
.eu {
position: absolute;
top: -80px;
left: -80px;
display: none;
width: 1200px;
height: 1200px;
z-index: 300;
}
.visible {
display: block;
pointer-events: all;
}
jQuery:
$('#eumap').mouseover(function () {
$('.eu').addClass('visible');
});
$('.eu').mouseout(function () {
$('.eu').removeClass('visible');
});
$('#apmap').mouseover(function () {
$('.ap').addClass('visible');
});
$('.ap').mouseout(function () {
$('.ap').removeClass('visible');
});
There is too much svg to copy, so here is a little DEMO
You can add to your CSS...
text {
pointer-events: none;
}
See https://jsfiddle.net/g04qhcw9/
The svg part appears when I hover over big region like EU. But everytime I hover over text or border it disappear.
That’s because you are using mouseover/mouseout – they fire again each time you move the mouse over child elements. (See Jquery mouseenter() vs mouseover() for details.)
Simply use mouseenter/mouseleave instead:
$('#eumap').mouseenter(function () {
$('.eu').addClass('visible');
});
$('.eu').mouseleave(function () {
$('.eu').removeClass('visible');
});
https://jsfiddle.net/g04qhcw9/1/
Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.
you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});
Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle
I'm trying to add an effect on a div, where once you hover over the block the block will move up. I'm using Jquery transitions as I'm aware that anything under ie10 doesnt really support css transitions. At the moment I can get it to move but there is no effect on the movement (just using css). I'm not sure how I would start to add the jquery transition.
At the moment I got it so that once you hover over the block it adds a class.
$(document).ready(function () {
$(".container").hover(function () {
$(this).toggleClass("animated-effect");
});
});
Heres my jsfiddle, I can't manage to get the code to work something up with my js:
http://jsfiddle.net/4bgj4959/
You are looking for the animate method. Note that hover method takes two parameters, the second parameter is for onmouseout (when you are done hovering).
$(document).ready(function() {
$(".container").hover(function() {
$(this).animate({
top: '20px'
})
}, function() {
$(this).animate({
top: '0px'
})
});
});
.container {
width: 500px;
height: 100px;
border: 1px solid #00c;
position: relative;
top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>
you code is working you didn't include jquery see updated fiddle
demo
Following is my js fiddle in which i tried to create a light out effect like the following website bankalhabib.com, The issue is that on hover on menu my rest of screen is not getting dim which i actually want and instead only my menu is getting dim.
Kindly let me know ow can i resolve this issue so i can achieve the same effect as above mentioned site?
Thanks,
http://jsfiddle.net/49Qvm/9/
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Num</li>
</ul>
$('li').hover(function(){
$(this).addClass('hovered');
},function(){
$(this).removeClass('hovered');
});
I think your best bet would be to create an element for the darken effect on the screen. When you hover over the ul element it will toggle the visibility of the darkening element.
You will need to be sure that the z-index value for the ul element is higher than the element that provides the darkening effect (Remember this! When setting z-index on an element you will need to be sure to set it's position CSS property to relative, fixed, or absolute).
Here's a fiddle: http://jsfiddle.net/49Qvm/28/
Try this javascript/css that utilizes z-index to create a focused effect.
CSS
.link {
z-index: 700;
list-style-type: none;
padding: 0.5em;
background: black;
display: inline-block;
cursor: pointer;
color: white;
}
.dim {
width: 100%;
height: 100%;
z-index: -6;
display: none;
content: "";
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.4);
}
body {
background-color: orange;
}
jQuery
var $dim = $('.dim');
$('.link').hover(function(){
$dim.fadeIn(200);
}, function(){
$dim.fadeOut(200);
});
HTML
<div class="dim"></div>
<ul>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
<div class="link"><li>Home</li></div>
</ul>
Some text here
http://jsfiddle.net/49Qvm/33/
I think maybe this is a scoping issue. Inside the context of the function, "this" refers to the function not the li element. I used to run into a lot of problems related to this. The solution for my cases were to look into using closures to ensure you are adding the class to the correct html element.