Morning,
I'm trying to display a div onmouseover. I created a function but i don't know what is wrong. Could you help me please.
The HTML code:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<title> PHOTOGALLERY</title>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link rel="stylesheet" href="css/smoothness/jquery-ui-
1.9.2.custom.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js">
</script>
<script>
function show_img_container() {
$("#image_container").css("display", "block");
}
</script>
</head>
<body>
<div id="div_container">
<div id="div_image" class="cycle-slideshow">
<img src="images/2.jpg" style="height:100%; width:100%">
<img src="images/3.jpg" style="height:100%; width:100%">
<img src="images/4.jpg" style="height:100%; width:100%">
<img src="images/5.jpg" style="height:100%; width:100%">
</div>
<div id="image_container" onmouseover="show_img_container()"></div>
</div>
</body>
</html>
In the css file i have a image_container id where the attribute display is set to 'none';
If you only want to show the <div> on hover you wouldn't need any JS you could try someting like this:
div {
display: none;
}
a:hover + div {
display: block;
}
<a>Hover over me!</a>
<div>Stuff shown on hover</div>
To explain further:
Since you're using display: none; on the container the mousehover won't take affect since the <div> can't be found by the event since it's not displaying in the first place.
Hope this helps!
I'll answer based on what OP has provided. wrap the #image_container with a div that contains the function, then it should work.
And since it's quite weird that something appeared when hovered but didn't disappear after hovering out, I added another function for onmouseout
function show_img_container() {
$("#image_container").css("display", "block");
}
function hide_img_container() {
$("#image_container").css("display", "none");
}
#image_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div onmouseover="show_img_container()" onmouseout="hide_img_container()">
HOVER ME!!
<div id="image_container">IM HIDDEN!!!</div>
</div>
In the css file i have a image_container id where the attribute display is set to 'none';
It is not possible to hover a none blocked element.
You can use the opacity attribute to hide your div.
div {
opacity: 0;
}
div:hover {
opacity: 1;
}
<div>Stuff shown on hover</div>
You cant hover on div if its display is sets to none.
Ok. I know the problem. In the css stylesheet i had this:
#image_container {
position: absolute;
height: 120px;
width: 100%;
bottom: 5%;
background-color: black;
opacity: 0;
**transition: all 0.3s ease-in-out 2s;**
z-index: 1;
}
#image_container:hover {
opacity: 1;
}
If i delete the transition attribute it works:`
Could you show me why?
Related
I'm trying to achieve 3 clickable <div> that expand and hide/overlap others on click, while showing what's inside each clicked <div>. I only have JQuery as of right now.
My initial question is, what should I use? (Flexbox? CSS animation? React?)
Is it possible in vanilla html+css+js stack without having a bonky transition ?
I made an image to illustrate what I'm trying to say:
It is possible just by using pure Javascript, all you need to do is add a click event to each div, and when one is clicked you issue yourDivName.setAttribute("style", "display: block"); and issue yourDivName.setAttribute("style", "display: none"); to the other two. Then just repeat this process for each one. Obviously enclosing each one in a function yourFunctionName(){
//Enter logic here
}
Your process should be first getting each div and putting it in a variable, then doing the above code according to what you wish to do to the div. I hope this helps let me know if you'd like me to do the Javascript for you :)
First of all, you should write your script in the question when asking questions on stackoverflow. Because we must see what code do you have.
About your question, there are so many options. If you want to use jQuery:
HTML:
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
JavaScript:
$('.group').on('click', function(){
$('.group').hide();
$(this).show();
});
If you want to make it with CSS, you can do something like:
HTML:
<div class="group"></div>
<div class="group"></div>
<div class="group"></div>
CSS:
.group{
display: none;
}
.group:active{
display: block;
}
If you want to make some animation you can use CSS transition
I am answering my own question to show you the progress I made.
This is greatly starting to get form following both your advices. (Jsfiddle at the end).
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StackCode</title>
<link rel="stylesheet" href="dummy.css" />
</head>
<body>
<header>
</header>
<section class="section">
<div class="service-box">
<div class="service-story">
<div> <h1> Title </h1> </div>
<img class="img-left" src="https://via.placeholder.com/250x700">
<div class="service-story-expand">
<h1>TITLE</h1>
<p>Sample text</p>
<img src="https://via.placeholder.com/100">
</div>
</div>
<div class="service-art">
<div> <h2> Title2 </h2></div>
<img class="img-middle" src="https://via.placeholder.com/250x700">
<div class="service-art-expand">
<h1>TITLE</h1>
<p>Sammple text</p>
</div>
</div>
<div class="service-motion">
<div> <h2> Title3 </h2></div>
<img class="img-right" src="https://via.placeholder.com/250x700">
<div class="service-motion-expand">
<h1>TITLE</h1>
<p>Sammple text</p>
</div>
</div>
</div>
</section>
<script src="jquery-3.4.1.min.js"></script>
<script src="dummy.js"></script>
</body>
</html>
CSS
*
{
margin:0px;
padding:0px;
}
html {
overflow-x :hidden;
background: black;
}
header
{
height:20px;
overflow: hidden;
background-color: black;
padding: 45 0 0 0;
z-index: 0;
width: 100%;
}
.section{
width: 100%;
background:grey;
margin: auto;
}
.service-box{
overflow: hidden;
width: 90%;
height: auto;
margin:auto;
display: flex;
justify-content: space-evenly;
}
.service-story{
height: auto;
overflow: hidden;
flex:1;
order: 1;
transition: flex .3s ease-out;
}
.service-story.clicked{
background:white;
height: auto;
flex:6;
transition: flex .3s ease-out;
}
.service-story-expand{
display: none;
}
.service-art{
overflow: hidden;
flex:1;
transition: flex .3s ease-out;
order: 2;
}
.service-art.clicked{
background:white;
flex:6;
transition: flex .3s ease-out;
}
.service-art-expand{
display: none;
}
.service-motion{
overflow: hidden;
flex:1;
transition: flex .3s ease-out;
order: 3;
}
.service-motion.clicked{
background:white;
flex:6;
transition: flex .3s ease-out;
}
.service-motion.clicked img{
float: left;
}
.service-motion-expand{
display: none;
}
.service-story.clicked img{
width:auto;
height:auto;
}
Js + Jquery
$('.service-story').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-story-expand').show();
});
$('.service-art').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-story-expand').show();
});
$('.service-motion').on('click', function(){
$(this).toggleClass('clicked');
$(this).show();
$('.service-motion-expand').show();
});
I chose the solution of flexbox. This is not exactly what I was looking for, but it does the trick.
Now the problem I encounter are the following.
How to put content which is firstly hidden next to my images and not under ?
How to close other divs when one is open ?
How to hide content once a <div> is clicked again ? (If I understand correctly, is a "If/Then/Else" situation)
I think the last two questions are frequently asked, so I'll start searching by myself, just showing my progress.
Thank you once again for your time, and I hope I did better on formating.
Here is a jsfiddle.
https://jsfiddle.net/7oa28cg4/
Ps: Also working on responsiveness, i'm learning it.
result
I want to make the image stay clicked.
I am using two images for each icon. one is when is not clicked. another is when is clicked. hover is working fine. but focus is not working at all.
i don't see any errors or mistakes. help me please!
this is body
body{
width:350px;
}
img {
float:left;
width:60px;
height:50px;
}
#hardy{
float:right;
}
.category{
position: fixed;
padding: 2em;
left: 0;
top: 0;
background-color:white; /*Grey*/
padding:13px;
height:57px;
width:100%;
display:inline-block;
}
.img-top {
display:none;
z-index:99;
}
#restaurant:hover .img-top{
display: inline;
}
#restaurant:hover .img-bottom{
display:none;
}
#restaurant.img-top:focus {
display: inline;
}
#restaurant.img-bottom:focus {
display: none;
}
#hotel:hover .img-top{
display: inline;
}
#hotel:hover .img-bottom{
display:none;
}
#pub:hover .img-top{
display: inline;
}
#pub:hover .img-bottom{
display:none;
}
#park:hover .img-top{
display: inline;
}
#park:hover .img-bottom{
display:none;
}
#tourism:hover .img-top{
display: inline;
}
#tourism:hover .img-bottom{
display:none;
}
<div class="listView">
<div class="category">
<span id="restaurant">
<img src="./resources/icons/category/restaurant_list_icon.png" alt="restaurant" title="restaurant" class="img-bottom">
<img src="./resources/icons/category/restaurant_list_selected_icon.png" alt="restaurant" title="restaurant" class="img-top">
</span>
<span id="hotel">
<img src="./resources/icons/category/hotel_list_icon.png" alt="hotel" title="hotel" class="img-bottom">
<img src="./resources/icons/category/hotel_list_selected_icon.png" alt="hotel" title="hotel" class="img-top">
</span>
<span id="pub">
<img src="./resources/icons/category/pub_list_icon.png" alt="pub" title="pub" class="img-bottom">
<img src="./resources/icons/category/pub_list_selected_icon.png" alt="pub" title="pub" class="img-top">
</span>
<span id="tourism">
<img src="./resources/icons/category/tourism_list_icon.png" alt="tourism" title="tourism" class="img-bottom">
<img src="./resources/icons/category/tourism_list_selected_icon.png" alt="tourism" title="tourism" class="img-top">
</span>
<span id="park">
<img src="./resources/icons/category/park_list_icon.png" alt="park" title="park" class="img-bottom">
<img src="./resources/icons/category/park_list_selected_icon.png" alt="park" title="park" class="img-top">
</span>
</div>
</div>
it doesn't seem like focus is working.
only hover is working. I've looked for the answer through googld but can't find.
can anyone have the answer why focus is not working? thank you!!!
Wrong Style You Added
#restaurant.img-top:focus {
display: inline;
}
#restaurant.img-bottom:focus {
display: none;
}
Current Style is
#restaurant .img-top:focus {
display: inline;
}
#restaurant .img-bottom:focus {
display: none;
}
#restaurant ids main Div and .img-bottom is sub img tag
Hover and Click
Well the focus pseudo class wont work, because the hover pseudo class changes the state of the element when the cursor hovers away.
So in order to achieve this task we can create a custom class ( selected in the example below -- run the snippet ) using jquery and add or remove it on click events.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>peedikayil</title>
<style>
img{ width:200px; overflow:hidden; }
.clickme:hover #item1{display: inline;}
.clickme:hover #item2{display: none;}
.clickme #item1{display:none;}
.clickme #item2{display:inline;}
.selected #item1{display:inline;}
.selected #item2{display:none;}
</style>
</head>
<body>
<a href="" class="clickme">
<span id="item1">
<img src="http://www.clker.com/cliparts/3/7/7/f/1268838238959637666link-zelda_red_mini-hi.png" alt="restaurant" >
</span>
<span id="item2">
<img src="https://static.giantbomb.com/uploads/scale_small/0/5128/318633-zww_link11.jpg" alt="restaurant" >
</span>
</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var clicked = false;
$('.clickme').on('click',function(e){
e.preventDefault();
this.clicked = !(this.clicked);
if(this.clicked){
$('.clickme').addClass('selected');
}else{
$('.clickme').removeClass('selected');
}
});
});
</script>
</body>
</html>
Use javascript instead. Here's a sample implementation for you. I've used text instead of image since I don't have images here, just replace those with your images.
HTML code should be like this
<ul>
<li>Item 1 <!--add your original image here--></li>
<li>Item 2 <!--add your original image here--> </li>
</ul>
CSS
.selected#item1{color:#f00; /*you can use background: url(yourimagepath); here instead of color */}
.selected#item2{color:#0f0; /*you can use background: url(yourimagepath); here instead of color */}
JS
$('.clickme').on('click',function(e){
e.preventDefault();
$('.clickme').removeClass('selected');
$(this).addClass('selected');
});
Here's a working sample in jsfiddle
I have this example code that hovers an image to change the background color. How do you fill the entire image with color when hovered?
In my code snippet, it only fills the background color of an a tag element but not the image.
Here's an image to further clarify my question.
How do achieve this using the hover effect in tag element.
a img:hover {
background-color: purple;
}
a:hover {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Hovered with image no text -->
<img src="cart.png">
<!-- Hovered without image just text -->
Change color text
</p>
</body>
</html>
Assuming that your image is white and the other parts are transparent. Just change the CSS like so:
a img {
background-color: purple;
}
a:hover img {
background-color: yellow;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- Hovered with image no text -->
<img src="cart.png">
<!-- Hovered without image just text -->
Change color text
</p>
</body>
</html>
I have found another method to change the background image. I suppose to have two images so when hovered it will change the image. Thanks for the info #Jaromanda X
#my-img:hover {
content: url('images/pinkcart.png');
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img id="my-img" src="images/redcarticon.png"/>
</p>
</body>
</html>
And thank you also for helping me everyone.
Try with below solution with jQuery:
a img:hover {
background-color: purple;
}
a:hover {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Hovered with image no text -->
<a id='image' href="https://www.w3schools.com"><img src="cart.png"></a>
<!-- Hovered without image just text -->
<a id="text" href="http://www.wikipedia.org" onmouseover="$('#image').css('background-color', 'purple');" onmouseout="$('#image').css('background-color', 'white');">Change color text</a>
</body>
Please update style
a{
padding:15px;
background-color: purple;
display:block;
}
a:hover {
background-color: yellow;
}
I have been making a website-resume and I want the user to be able to click on a picture of a company I've worked for and have a description of my work experience come up. I can click on a picture and have a div pop up on top as shown here:
Any ideas on how this could be done?
you can set css to the popup div which u want to show over the html page.
Consider the following eg:
#mainPage {
width: 100%;
height: 100%
}
#popUp {
display: none;
z-index: 100;
width: 200px;
height: 50px;
background: #ADD;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="mainPage">
<img src="https://lh4.ggpht.com/wKrDLLmmxjfRG2-E-k5L5BUuHWpCOe4lWRF7oVs1Gzdn5e5yvr8fj-ORTlBF43U47yI=w300" width="20%" />
</div>
<div id="popUp">
<p>Hello !!! It's a popup div </p>
</div>
</body>
<script type="text/javascript">
$(function() {
$('#mainPage img').on('click', function() {
$('#popUp').show();
});
});
</script>
</html>
Trying to get a simple popup to appear on mouseover a div I followed the answer Description Box using "onmouseover" but it doesn't work. What am I missing?
<!DOCTYPE html>
<head>
<style>
.parent .popup {
display: none;
}
.parent:hover .popup {
display: block;
}
</style>
</head>
<body>
<script type="text/javascript">
var e = document.getElementById('#parent');
e.onmouseover = function() {
document.getElementById('popup').style.display = 'block';
}
e.onmouseout = function() {
document.getElementById('popup').style.display = 'none';
}
</script>
<div id="parent">
This is the main container.
<div id="popup" style="display: none">some text here</div>
</div>
</body>
</html>
There are a few problems. You are referencing classes in the CSS (. is class and # is id) second, you don't need to overload the CSS display none style. Finally, you don't need the JavaScript in this case.
See the working example.
<!DOCTYPE html>
<head>
<style>
#parent #popup {
display: none;
}
#parent:hover #popup {
display: block;
}
</style>
</head>
<body>
<div id="parent">
This is the main container.
<div id="popup">some text here</div>
</div>
</body>
</html>