I want to place a div over the button once the button is clicked like the image below:
http://i.imgur.com/pdrqnmj.png
Any ideas on how to do this ?
put the button and the div panel in a parent div. make the popup div absolute and hidden.
.parent-div{
position:relative;
}
.popup-div{
position:absolute;top:0px;left:0px;
z-index:10;
display:none;
}
show the popup-div on btn click.
$(".btn").on("click", function(){
$(".popup-div").show();
});
you can do that! Suppose you are having the button on the very bottom left of your page.
I will just show the basic, only the code for button and the div. Hope it helps.
css for that:
.button, .div {
position: absolute;
bottm: 0;
left: 0;
}
.div {
display: none; // to make it hidden.
}
the HTML would be:
<button class="button">I am button</button>
<div class="div">I am on the button!</div>
Now the jQuery should be something like:
$(document)ready(function() {
$(".button")click(function() {
$(".div").show();
})
})
Related
I want to make a button that changes the text inside the button by pressing the button, but I don't know how! :(
I used :hover, but when I move the mouse pointer away, it goes back to its previous state.
There is the possibility of solving it with the pseudo-class :hover and the use of data attributes. The idea of this solution is that you hide the original button text, add an empty content and then use hover over the element to show the content of the data attribute.
I'll show you how in the following example:
body {
background-color: #F2CD5C;
text-align: center;
}
.container {
margin-top: 30vh;
}
/*
MARK BUTTON:
In the button styles, it is necessary to hide the original text that we generated, to create the correct spacing and the data attribute text can overlap
The text color must be the same as the button background.
Position must be relative.
*/
.button {
position: relative;
padding: 0.5em 1em;
border: 2px solid #fff;
border-radius: 15px;
font-size: 2em;
color: black;
background: black;
}
/*
MARK USE :before and :after
Setup pseudo-element ::before with content: ""; and position must be absolute and setup with the original position text inside the button.
Write ::after with the exact text inside button = Click me! with the same position and setup to ::before pseudo-element
*/
.button::before {
content: "";
position: absolute;
left:0;
width: 100%;
text-align: center;
opacity: 0;
color: white;
}
.button::after {
content: "Click me!";
position: absolute;
left:0;
width: 100%;
text-align: center;
opacity: 1;
color: white;
}
.button::before {
content: attr(data-hover);
}
.button:hover:before{
opacity: 1;
}
.button:hover:after{
opacity: 0;
}
<div class="container">
<button class="button" type="button" data-hover="Hello world!">Click me!</button>
</div>
The code uses pseudo-elements ::before and ::after to display different text when the button is hovered over. The text "Click me!" is set as the content for the ::after pseudo-element, while the ::before pseudo-element gets its content from the "data-hover" attribute. When the button is hovered over, the ::before pseudo-element's opacity becomes 1 and the ::after pseudo-element's opacity becomes 0, effectively hiding and showing different text on the button.
I hope this can help you solve your question. Anyway, this solution is not clean, we should handle the DOM using JavaScript.
Reference Links
Using data attributes
I only know how to do this using javascript, hope that helps.
HTML
<button class="btn">Hey, click me!</button>
JS
first I store the button in a variable
var button = document.querySelector(".btn")
then I add an event listener to the button with the "click" event, which will make the function "function()" be executed whenever the button is clicked
button.addEventListener("click", function(){})
now, I define the function to change the text of the button using "this" to access the button of the function and ".textContent" to change the text that was inside
button.addEventListener("click", function(){
this.textContent = "Hey, you clicked me!"
})
Click "run" for a preview
var button = document.querySelector(".btn")
button.addEventListener("click", function(){
this.textContent = "Hey, you clicked me!"
})
<button class="btn">Hey, click me!</button>
I am having trouble making elements hover on a mobile device.
In my CSS, I type something like:
.button:hover {
background-color: #fff;
}
This seems to hover fine on my desktop, however on my iPhone and other touch devices, I can't seem to make the button hover.
There is no hover event on mobile, you can define hover behavior and it will work on desktop. But on mobile, you will see this hover only by click/touch.
Hovers mean one thing on the other. in this case its the mouse cursor over the HTML button or whatever element you use.
In the case of a phone, there is no mouse cursor. its always a click. Hovers in most cases would show only on click or touch. If you really need this you can try the Javascrit onclick() or other functions, so when they click or touch, you can add a bit of something.
For a very quick solution of this problem with jQuery/CSS, I did the following.
wrote styles for my element like this:
.one-block:hover, .one-block.hover { ... }
positioned it:
.one-block { position: relative; }
added the last element in this block -> .mobile-mask:
<div class="one-block">
....
<div class="mobile-mask"></div>
</div>
positioned .mobile-mask:
.mobile-mask {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
hide it for non-mobile (this part is not precise at all: just with css. if you detect mobile devices by some other means and, for example, give a class to body, than it will be more precise. in this case I just need a quick solution):
#media (min-width: 681px) {
.mobile-mask {
display: none;
}
}
create javascript that will add/remove .hover class:
$('.mobile-mask').on('click', function(){
$('.list .mobile-mask').show();
$('.list .one-block').removeClass('hover');
$(this).hide();
$(this).parent().addClass('hover');
});
$(window).on('resize', function(event){
var windowWidth = $(this).width();
if(windowWidth > 680){
$('.list .one-block').removeClass('hover');
}
});
I would like to add actions to this image
So when the user hovers over red dot, some information appears, or when clicks (modal from bootstrap appears). I am using bootstrap, and spreading divs over the image don't give normal result. I want it to be responsive. Any ideas?
there should be a onhover method for javascript on the html dom.
<div id="point1" onmouseover="doHover('point1', true);" onmouseout="doHover('point1', false);"></div>
So, you have a problem with the divs?
function doHover(id, bool) {
var obj = document.getElementById("hoverPoint"+id);
if(bool) {
obj.style.backgroundColor="green";
}else {
obj.style.backgroundColor="blue";
}
}
.hoverPoint {
position:absolute;
top: 0px;
left: 0px;
width:100px;
height:100px;
display:block;
background-color: blue;
opacity: .6;
}
#hoverPoint1 {
top: 130px;
left: 135px;
}
<img src="http://i.stack.imgur.com/sUTxI.png" style="width:777px; height:292px" />
<div class="hoverPoint" id="hoverPoint1" onmouseover="doHover(1,true);" onmouseout="doHover(1,false);"></div>
I solved the problem by deleting red dots in photoshop and then adding them using pure html (I made buttons with background image of red dots) then I placed this dots randomly on the roadmap
Very new to HTML and CSS. I've finally figured out how to hover a div and cause that to show text in another div. But what then happens is when I hover the div where the text appears that too shows the text; which I don't not want.
<div class="leaf5">
<img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'">
<div class="cashdup-info">
<h3 class="cashdup-text"><i><span style="font-size: 38px; color: #359869" >CashdUp</span> is a home budgeting tool that allows you to make every cent count. </i></h3>
</div>
</div>
Is there a way to hover the div called "leaf5" and have that show text in another div without the text showing up if I hover the actual div the text is contained in. My CSS is as follows:
.cashdup-text {
font-weight: 100;
font-size: 22px;
display: none;
}
.leaf5:hover .cashdup-text {
display: block;
}
Thanks.
.leaf5:hover .cashdup-text:hover {
visibility: hidden;
}
I wouldn't use display: none here, because an element that has display: none logically can't be in a hover state.
use this way :
Demo
Demo for singlle image only
CSS
div {
display: none;
}
img:hover + div {
display: block;
}
HTML
<img src="image/imh.pmg">
<div>Stuff shown on hover</div>
The issue you are facing is when you apply hover to your leaf5 div it displays the cashdup-text which then increases the area of leaf5 including the text part. That is why when you have text displayed you can't make it disappear. Because you are already hovering it.
You can try absolute position like this way:
CSS:
.cashdup-text {
font-weight: 100;
font-size: 22px;
}
.cashdup-text{
position: absolute;
display: none;
}
.leaf5:hover .cashdup-text {
display: block;
}
Fiddle: https://jsfiddle.net/dqz9j2tj/
The problem is, .cashdup-text is a child of .leaf5 so when you're hovering over .cashdup-text, the browser sees it that you're also hovering over .leaf5 (in a way).
Are you open to using JS? If so, please see below.
var showme = document.getElementById("showme");
showme.style.display = "none";
function display() {
showme.style.display = "block";
}
function hide() {
showme.style.display = "none";
}
<div class="leaf5" onMouseOver="display();" onMouseOut="hide();">
<img class="leaf-5-about" src="images/Leaf%205%20about.png" onmouseover="this.src='images/Leaf%205%20about%20hover.png'" onmouseout="this.src='images/Leaf%205%20about.png'">
</div>
<div class="cashdup-info">
<h3 class="cashdup-text" id="showme"><i><span style="font-size: 38px; color: #359869" >CashdUp</span> is a home budgeting tool that allows you to make every cent count. </i></h3>
</div>
As you can see, I've added an id of "showme" to the h3 element you want to show / hide and have added MouseOver / MouseOut events to the .leaf5 div. I've also separated .leaf5 from the div below, just so it doesn't cause any issues like you described when hovering over .cashdup-text.
Try adding this to your stylesheet:
.leaf5:hover .cashdup-text {
opacity:0;
}
.cashdup-text {
opacity:1;
}
I have two divs; one inside the other one. I would like to show the inner div when hovered on the outer div, otherwise the inner div should be hidden. The outer div has an image in it as well (sibling of the inner div) which is always displayed, so when hovered over the image it will also show the text. Can someone help me?
<script>
$(".divone").hover(
function () {
$(".divtwo").css("visibility","visible");
},
function () {
$(".divtwo").css("visibility","hidden");
}
);
</script>
<div class="divone">
<div class="divtwo">some text here</div>
<img src="images/test.png" />
</div>
.divtwo{
background-color:red;
top:120px;
height:50px;
width:223px;
position:absolute;
visibility: hidden;
}
.divone{
height:169px;
position:relative;
}
You could also have a style like this:
.divone:hover .divtwo {
visibility: visible;
}
No JS required.
You can attach the events to mouseenter and mouseleave events like this.
$(".divone").mouseenter(function () {
$(".divtwo").css("visibility","visible");
});
$(".divone").mouseleave(function () {
$(".divtwo").css("visibility","hidden");
});