How to show button on div mouse hover - javascript

i want to show button on div hover.
when i hover mouse on div then button show otherwise hide.
my button in divbutton div.
html
<div class="divbutton">
<button type="button" style="display: none;">Hello</button>
</div>
when I hover mouse on div it should show but how to do that i do not know.
when I remove mouse button again hide.
Thank you.

Use the below selector
button {
display: none; /* Hide button */
}
.divbutton:hover button {
display: block; /* On :hover of div show button */
}
Demo
Also make sure you assign some height or min-height to your div element, else it will be 0 as it doesn't hold any content. Also, don't use display: none; as inline style, as inline styles have highest specificity, and hence, you will be forced to use !important which is bad.
In the above example am using button {/*Styles*/} but that is a general element selector, so make sure you define a class to your button element.

Use following jQuery to perform your task.
Here is a jsfiddle demo
$(document).ready(function () {
$(document).on('mouseenter', '.divbutton', function () {
$(this).find(":button").show();
}).on('mouseleave', '.divbutton', function () {
$(this).find(":button").hide();
});
});

Mr. Alien's answer gives a nice CSS implementation. If you need in jquery, use this -
$( ".divbutton" )
.on("mouseenter", function() {
$("button").show();
})
.on("mouseleave", function() {
$("button").hide();
});
In pure JavaScript -
var buttonDiv = document.getElementsByClassName("divbutton")[0]; //better use some id and then use getElementById
buttonDiv.onmouseover = function() {
document.getElementById("YourButtonId").style.display = 'block';
}
buttonDiv.onmouseout = function() {
document.getElementById("YourButtonId").style.display = 'none';
}

Try this:
$('.divbutton').mouseover(function(event)
{
$(this).find('button').show();
});
$('.divbutton').mouseout(function(event)
{
$(this).find('button').hide();
});

first hide the button with transform property.
button{
transform:translate(100%,100%)
//this will move the button right and buttom
}
then when you hover on div, you bring it back
.divbutton:hover button{
//class name should have been divButton
transform:translate(0,0)}

Related

How can I hide some elements when showing another?

I'm finishing my website and I have a script which is hiding or showing a div when a button is pressed.
Here is code :
function display(id) {
var e = document.getElementById(id);
if (e.style.display === "none") {
e.style.display = "block";
} else {
e.style.display = "none";
}
}
But this code is not truly what I'd like because I only want that one div can be displayed at the same time (ex : if div 4 is active and the user need to see the div 2, it has to hide the first one). I have just used JS for quick things therefore I don't have any idea how to do this.
Also would it be possible to hide a specific div depending from which link the user comes on the page.
Exemple of my html :
<a onclick="display('1_1_1')">button</a>
<div id="1_1_1" class="well" style="display: none;">
<h1>Title</h1>
</div>
Thank you for your help !
It is better to add a class which contains display: none like
.no-display {
display: none;
}
then just add or remove that class when you click on a div like
parentDiv.addEventListener("click", function() {
const elem = getElemenyById("elemID");
if(something) {
elem.classList.add("no-display");
else if(something) {
elem.classList.remove("no-display");
};
});
You can create a class with display property and you can add it using Jquery.
CSS:
.display_none_class {
display: none;
}
Jquery:
<script>
$( "#element_ID" ).addClass( "display_none_class" );
</script>
But this sometimes has aligning issues. So, you can use CSS as:
.display_none_class {
width:0;
visibility: none;
}
You can implement this by toggle class:
$("#button_ID").click(function(){
$("#element1_id").toggleClass("display_none_class");
$("#element2_id").toggleClass("display_none_class");
});
First, add this class to the element which you want to hide first. Then On clicking button, it will toggle the class and will make one element visible and other hide.
First add this

Have only 1 div toggle instead of all

running into issues of trying to have only 1 div toggle instead of them all toggle. I've tried using next() and setting the selector to the children as opposed to the parent element, but then it won't toggle open at all.
FIDDLE:
http://jsfiddle.net/L415g07n/2/
What I am specifically trying to accomplish?
Have the selected div toggle when .toggle is clicked instead of all of them being toggled at once.
var c1 = $("#o");
var c2 = $("#t");
var c3 = $("#th");
$(document).ready(function () {
$(c1).hide(0).delay(500).fadeIn(1500);
$(c2).hide(0).delay(1500).fadeIn(1500);
$(c3).hide(0).delay(2500).fadeIn(1500);
});
var content = $("#main .column .body");
$(content).hide();
var t1 = $(".toggle");
$(t1).click(function () {
$(content).slideToggle('slow');
$(t1).toggleClass("toggle");
$(t1).toggleClass("toggle-d");
});
Try to use this object and traverse to the required nodes,
$(t1).click(function () {
$(this).toggleClass("toggle")
.toggleClass("toggle-d")
.parent().next('.body').slideToggle('slow');
});
DEMO
jQuery's $(this) alows you to apply your effects on the current element. Here's the correct, shorter and simpler version of your code:
$(document).ready(function () {
$(".column, .body").hide(); // you should put this in your CSS ( .column, .body { display: none; } )
$(".column").each(function(index) {
$(this).delay(400*index).fadeIn(300);
});
$(".toggle").click(function () {
$(this).toggleClass("toggle").toggleClass("toggle-d").parent().next(".body").slideToggle();
});
});
Notice, how you can even improve the part when your divs fade in, by reffering to them with a class name instead of id by using $(this) and .each().
I think w3schools explains $(this) quite nicely.

How to change CSS pseudo-class element using JavaScript

I want to change this image using javascript:
dance:active { background-image: url("myImage.png") }
You can use
document.getElementById(element).style.backgroundImage = url(image);
to change
#element {background-image: url(image)}
I would like to change the image of when the element is active using javascript. Thanks!
I figured it out!
You can have multiple classes in your CSS :
element.dance1 { stuff }
element.dance1:active { active stuff }
element.dance2 { stuff 2 }
element.dance2:active { active stuff 2 }
and then change the class of the element in javascript:
document.getElementById(element).className = dance1/dance2
You can try using jQuery to achive what you want. dance: active is CSS Pseudo-classes. Learn more about Pseudo-class.
The demo change the div color when mouse down and switch the color back when mouse up. Leave comments if this is not what you want.
$("#dance").on("mousedown", function () {
$("#dance").css("background", "blue");
}).on("mouseup", function(){
$("#dance").css("background", "black");
});
https://jsfiddle.net/x_li/5nkvms8q/
and jQuery can also do the following
$('#damce:checked').val();

Show hide bubble div jquery click function

I have one question about my script.
I have created this DEMO from codepen.io
I'm trying to make a bubble pop-up clicked on the link. My onclick function is working now.
My question is, if you click my DEMO page then you see there are two image and when you hover over that image then you see black color div.
So if you click this div then you see .bubble will open but if you mouse live on this div bubble will still stay open. Ok it should be stay opening but the black div automatically getting display:none => I don't want it (How can i do this.)
Also if you click right side black color div then you see left .bubble still stay open so i want when i click other black div then i want other bubble will automatically hide.
Anyone can help me in this regard ?
This is my jquery function :
$(document).ready(function() {
$('.nav-toggle').click(function(){
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.html('x');
}else{
toggle_switch.html('x');
}
});
});
});
You could just modify this piece of css :
.imgar:hover .delete, .imgar.selected .delete{
display: block;
}
Notice, I added the class selected so when you do the js event click add the class event to imgar like so :
$('.imgar').addClass('selected');
And don't forget to remove the class when he click back to the element :
$('.imgar').removeClass('selected');
EDIT
JS
$(document).ready(function() {
$('.nav-toggle').click(function(){
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$('.imgar').removeClass('selected'); // Remove the X before openning a second
if($(collapse_content_selector).css('display')=='none'){
$('.bubble').hide();
}
$(collapse_content_selector).toggle(function(){
if($(this).css('display')=='none'){
toggle_switch.parent().parent().removeClass('selected');
toggle_switch.html('x');
}else{
toggle_switch.parent().parent().addClass('selected');
toggle_switch.html('x');
}
});
});
});
CSS
.imgar:hover .delete, .imgar.selected .delete{
display: block;
}
Codepen
http://codepen.io/SebastienBeaulieu/pen/RNPzzL

Change Toggle(); from Display:none to Visibility:hidden

This code is working successfully on the project that I am working on. The problem with this is that the elements that this code affects are positioned absolutely. When .field-name-field-pin-point it clicked the element .group dealer is hidden, but the .field-name-field-pin-point moves off of the page. Ideally, I would like the visibility to be set at none upon page load, but it would probably be easier to do that part in CSS. Here is what I am currently using:
jQuery(document).ready(function () {
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').toggle();
});
});
There will be more nodes that will be positioned differently so the full class name I provided is necessary. The markup (generally speaking) is as follows:
<div class="node-202">
<div class="group-dealer">...</div>
<div class="field-name-field-pin-point">...</div>
</div>
I am basically creating points on a map that when clicked, bring up a small window with more information about that location.
Here is a reference to my last post if you are looking for more information: Toggle Class Visibility by Clicking on another Class
I suggest your best approach is to add a css rule and just toggle a class on the elements
CSS
.group-dealer.hidden{ visibility:hidden}
JS
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').addClass('hidden');/* use toggleClass if more appropriate*/
})
Just toggle the visibility then
jQuery(document).ready(function () {
jQuery('.node-202 .field-name-field-pin-point').click(function() {
jQuery(this).siblings('.group-dealer').css('visibility', function(_,vis) {
return vis == 'hidden' ? 'visible' : 'hidden';
});
});
});
Try:
$('.node-202 .field-name-field-pin-point').click(function () {
if ($(this).siblings().css('visibility') == 'visible') {
$(this).siblings().css('visibility', 'hidden');
} else {
$(this).siblings().css('visibility', 'visible');
}
});
DEMO here.

Categories