Say I have 2 divs, positioned side by side (with some intermediate elements between them): A (left) and B(right). When hovering over B, I wish to have another div(C) appear over the left one (A).
I know how to toggle the display none/block properties but I don't know how to write the condition so the div C can appear on another div, not the one that we're hovering over.
Can this be done?
<div className="A">
<h2>About me</h2>
</div>
<div className="B">
<div>
<Link className="link1-to-project" to="/project1">
<h2>Project 1</h2>
<div className="C"></div>
</div>
codeply demo here
Html
<div id="a">
Div A
<div id="c">Div C</div>
</div>
<div id="b">Div B</b>
css
#a, #b{
float:left;
height:100px;
width:100px;
color:#fff;
background-color:#ffcc66;
margin:10px;
text-align:center;
}
#c{
background-color:#000;
margin:10px;
visibility:hidden;
}
Javascript
document.getElementById("b").addEventListener("mouseover", mouseOver);
document.getElementById("b").addEventListener("mouseout", mouseOut);
function mouseOver() {
document.getElementById("c").style.visibility = "visible";
}
function mouseOut() {
document.getElementById("c").style.visibility = "hidden";
}
UPDATE:
https://jsfiddle.net/mq5bza81/1/
https://jsfiddle.net/mq5bza81/
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<style>
.wrapper {
position: relative;
}
.b:hover+.c {
display: block;
}
.c {
display: none;
position: absolute;
top: 0;
}
</style>
<div class="wrapper">
<div class="a">AAA</div>
<div class="b">BBB</div>
<div class="c">CCC</div>
</div>
</body>
</html>
Related
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
Been looking all over stack for answers and nothing fits my specific scenario:
I have a parent div and within that I have two child divs aligned horizontally next to each other. I want to pretty much fill up all that extra space in the parent div (shown in purple color). I want to take the div in red and pull it up and down to fill the parent so that column background is all red and similarly, the right div fills up and down and the background for that entire fills up to be blue. Below is my div structure
<div class="container">
<div id="parent" class="btn row-height" style="width:100%; margin:0%; margin-top:5%; padding-top:10%; padding-bottom:10%; border-solid:1px; border-radius:10px; background:#d3d3e5; overflow:hidden" type="submit">
<div class="row">
<div class="col-height col-middle col-xs-4 pull-left card" style="background-color:red">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">TEXT</h3>\
</div>
</div>
<div class="col-height col-middle col-xs-8 pull-right card" style="background-color:blue;">
<div class="col-xs-12 text-center">
<h4>TEXT</h4>
<p>TEXT</p>
</div>
</div>
</div>
</div>
</div>
To make it clearer: I want my final thing to look like this:
I think you might be looking for something like this.
.container {
height:500px;
}
.container #parent {
height:100%;
}
.container #parent .row {
height:100%;
position: relative;
}
.container #parent .row #child-left {
height: 100%;
width:30%;
background-color: blue;
float:left;
}
.container #parent .row #child-right {
height: 100%;
width:70%;
background-color: yellow;
float: right;
}
I am not sure what styles .container, #parent and row have, so I included what could possibly be their styles. But the meat of the of the answer/solution here is the last two blocks of the styles. The idea is that both children of the parent must have 100% height of whatever is containing them.
Check demo here: https://jsfiddle.net/an6t1yj3/
In case you can't, this is the output of the fiddle:
You display: table values.
<style>
#parent {background: purple; overflow: hidden;}
.row {display: table; height: 300px; width: 100%}
.row > div {display: table-cell; text-align: center; vertical-align: middle;}
#child-left {background: red; width: 40%;}
#child-right {background: blue; width: 60%;}
</style>
<div class="container">
<div id="parent">
<div class="row">
<div id="child-left" class="pull-left">left<br>left</div>
<div id="child-right" class="pull-right">right<br>right<br>right</div>
</div>
<div>
<div>
https://jsfiddle.net/mj87kucy/
What i want to happen is when i hover around the left side of the div, i want to display a previous button only, then when i hover around the right side it will display the next button only. how do i do that using CSS or jQuery?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container{
background-color:black;
width:400px;
height:200px;
z-index:-1;
}
#leftbutton, #rightbutton{
background-color:#0F9;
width:50px;
height:50px;
position:absolute;
top:75px;
text-align:center;
}
#rightbutton{
left:351px;
}
#leftbutton{
left:13px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftbutton">Previous</div>
<div id="rightbutton">Next</div>
</div>
</body>
</html>
this is my sample code: http://jsfiddle.net/twish/NKg24/
thanks in advance! :D
One way is to wrap the actual buttons in a parent element and hide the buttons but not the parent. When you hover over the parent, you set the button to be visible.
http://jsfiddle.net/NKg24/1/
<div id="container">
<div id="leftbutton">
<span>Previous</span>
</div>
<div id="rightbutton">
<span>Next</span>
</div>
</div>
#leftbutton, #rightbutton{
width:50px;
height:50px;
position:absolute;
top:75px;
text-align:center;
/*display:none*/
}
#leftbutton span, #rightbutton span {
display:none;
width:100%;
height:100%;
text-align:center;
background-color:#0F9;
}
#leftbutton:hover span, #rightbutton:hover span {
display:block;
}
I'm trying to create an efect that's change de background color from left to right.
I have created this: http://jsfiddle.net/kT95d/58/
<style>
#div1{
height:200px;
width:200px;
background-color:green;
float:left;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
<script>
$('#div1').mouseover(function (){
$('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="div1">
<div id="back">
That was amazing!
</div>
</div>
But, i want the text in horizontal and how you can see, this is vertical and after the effect go to horizontal.
I don't know if this is the best way to do this. Can help me?
Thanks!!
Here you go. I believe this is what you want:
http://jsfiddle.net/WVWKE/
Change is here:
<div id="div1">
<div style="position:absolute">That was amazing!</div>
<div id="back">
</div>
</div>
The problem before was that the text was inside your zero width div, so it was breaking onto multiple lines to try to fit. Then when you animated the width back to 200, the text had room to expand again.
Here we move the text out of the animated background div and into the parent div, then we give it a position:absolute to take it out of the flow so it doesn't take up space. You can of course move that inline style to your CSS, and probably should.
<style>
#div1{
margin-top: -200px;
height:200px;
width:200px;
background-color:green;
}
#back {
width:0px;
height:200px;
background-color:Gray;
display: block;
}
</style>
<script>
$('#div1').mouseover(function (){
$('#back').animate({width: '200px'}, 1000);
});
</script>
<div id="text">
That was amazing!
</div>
<div id="div1">
<div id="back">
</div>
</div>
I have the script in my html code. The video div is not displayed because it cant be displayed in the beginning. Any ideas why this is not sliding down and showing?
Here is the html code and java script code:
<!DOCTYPE HTML>
<html>
<head>
<title>Team Songs</title>
<link rel="stylesheet" type="text/css" href="default.css">
<script src="http://code.jquery.com/jquery-latest.js">
$(document.body).ready(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown("slow");
}
else {
$("#video").hide();
}
});
</script>
</head>
<body>
<div id ="content">
<div id="header">
<h1>Software Picture</h1>
</div>
<span id="menu">
<ul>
<li>Main Tab</li>
<li>Video Tab</li>
<li>Third Tab</li>
<li>Fourth Tab</li>
</ul>
</span>
<div id="video"></div>
</div>
<div id="footer">
</div>
</body>
</html>
Here is the CSS:
#charset "utf-8";
/* CSS Document */
body
{
background-color:#333;
}
#content
{
width:800px;
border:solid 1px #FFFFFF;
margin:auto;
}
#header
{
float:left;
margin:0px;
width:800px;
height:100px;
text-align:center;
background-color:#FFF;
}
#menu
{
float:left;
width:800px;
height:50px;
width:800px;
}
#menu ul
{
padding:0px;
list-style-type:none;
}
#menu li
{
float:left;
padding:5px 30px;
font-size:20px;
color:#FFFFFF;
border-right:solid 2px #FFF;
}
#video
{
display:none;
float:left;
width:800px;
height:500px;
background-color:#000000;
}
#footer
{
width:800px;
margin:auto;
}
Try replacing
<script src="http://code.jquery.com/jquery-latest.js">
with
<script src="http://code.jquery.com/jquery-latest.js">
</script>
<script>
and I think you should be fine
Your code is to show the div if it is already hidden and show if it is not visible.
Your else condition is always being executed so the video div will be always hidden.
Change the $("#video").hide(); to $("#video").fadeOut("slow"); then you can see it is going away when the dom finished loading.
IF you want to show the vide div, hide the div initially. So that it will be displayed
<div id="video" style="display:none;">
<h3>Video div content </h3>
</div>
</div>
jsfiddle sample for that : http://jsfiddle.net/uzARd/4/
Why dont you just use $("#video").slideToggle(); instead of the if else check?
and also set the display:none property initially
use seperate script tag for both like
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function ()
{
if ($("#video").is(":hidden")) {
$("#video").slideDown('slow');
}
else {
$("#video").hide();
}
});
</script>