I have this page http://myrender.altervista.org/show2.html
I moved the 5 buttons to the right corner with the float:right instruction and then the hover in those buttons stopped to work suddently (before the float:right it worked).
There is the HTML:
<div class="container">
<div class="imgcontainer">
<div class="latest">Ultimi Caricamenti</div>
<img class="imgslide" src="" />
</div>
<div class="buttondiv">
<div class="button" onclick="change(0); clearInterval(t);" id="p0"></div>
<div class="button" onclick="change(1); clearInterval(t);" id="p1"></div>
<div class="button" onclick="change(2); clearInterval(t);" id="p2"></div>
<div class="button" onclick="change(3); clearInterval(t);" id="p3"></div>
<div class="button" onclick="change(4); clearInterval(t);" id="p4"></div>
</div>
</div>
and there are the CSS classes (only the needed):
.button
{
display:inline-block;
height:10px;
width:10px;
background:#eee;
border-radius:50%;
cursor: pointer;
opacity: 0.6;
}
.button:hover
{
opacity:1.0;
}
.buttondiv
{
margin-top: -17px;
padding-right: 5px;
float:right;
}
.buttonactive
{
background:#1390cd;
opacity:0.8;
}
.container
{
width:592px;
height:183px;
}
Thanks in advance :D
Just add position: relative; to .buttondiv or to .button
Related
I have a 'ul' with dynamic data. Each list inside has an user image, and when you hover on the image, an info box will show up on the left side of the 'ul'.
When I set the 'ul' to be overflow-y:scroll, the part of the info box that's outside of the 'ul' will be cut.
Here's what it should look like. The blue area is the info box.
Here's what it looks like now: The blue area is cut.
Here's the css code:
.popUpRSVPList{
padding-left:0px;
overflow-y: scroll;
height: 70%;
position: relative;
}
.hoverToShowInfo{
position: relative;
}
.hoverToShowInfo .infoinfo {
display: none;
}
.hoverToShowInfo:hover .infoinfo {
position:absolute;
left:-280px;
top: -60px;
display:block;
z-index: 10;
top: 100%;
}
Here is the html code:
<ul class="popUpRSVPList" >
<li style="padding-left:20px;">
<a class="hoverToShowInfo" href="">
<!--Left Info Box, will show on hover-->
<div class="col-sm-12 infoinfo" >
</a>
</li>
</ul>
UPDATE:
The reason I set overflow-y:scroll; is that I need the ul to be scrollable and thus when there are hundreds of data, the 'ul' list will be shorter than the screen, and user can just scroll inside it to view each list.
Here is a jsfiddle link: https://jsfiddle.net/7gr7jvvh/
Please uncomment overflow-y:scroll. You will see the difference.
Take a look at given jsfiddle code hope you want this thing:
.popUpRSVPList li { background: white; list-style-type:none; padding:12px 15px; color: black;}
.popUpRSVPList li:nth-child(odd) { background: rgba(241,242,242,1); }
.popUpRSVPList{
padding-left:0px;
/* overflow-y: scroll;*/
height: 70%;
position: relative;
}
.hoverToShowInfo{
position: relative;
}
.hoverToShowInfo .infoinfo {
display: none;
}
.infoinfo div{
width:270px;
}
.hoverToShowInfo:hover .infoinfo {
position:absolute;
left:0px;
top: -60px;
display:block;
z-index: 10;
top: 100%;
height: 100px;
overflow-y: scroll;
}
span.rightNames {
color: white;
}
.infoBoxFirstLine{
background:rgba(49,66,84,1);
min-height:auto;
max-width:270px;
padding:12px 15px;
}
<ul class="popUpRSVPList" >
<li style="padding-left:20px;">
<a class="hoverToShowInfo" href="">
&User Name
<!--Left Info Box, will show on hover-->
<div class="col-sm-12 infoinfo" >
<div class="infoBoxFirstLine row " >
<!--attendee profile image w-->
<div class="leftImage" >
<img src="" style="border-radius:150px; width:50px; height:50px;"/>
<!--attendee name w-->
<span class="rightNames" style="">
NAME 1
</span>
</div>
<!--end-->
</div>
<div class="infoBoxFirstLine row " >
<!--attendee profile image w-->
<div class="leftImage" >
<img src="" style="border-radius:150px; width:50px; height:50px;"/>
<!--attendee name w-->
<span class="rightNames" style="">
NAME 1
</span>
</div>
<!--end-->
</div>
<div class="infoBoxFirstLine row " >
<!--attendee profile image w-->
<div class="leftImage" >
<img src="" style="border-radius:150px; width:50px; height:50px;"/>
<!--attendee name w-->
<span class="rightNames" style="">
NAME 1
</span>
</div>
<!--end-->
</div>
</div>
</a>
</li>
</ul>
<div id="visible" style="float:left;">
<img src="image1.jpg" id="boom">
</div>
<div id="first" style="float:left; ">
<span class="bob">Flatkit</span>
</div>
I tried the following code,but it didn't helped me.
#visible #first:hover ~ #visible>#first
{
display:inline-block;
}
#visible :hover >#first
{
display:inline-block;
}
#visible :hover + #first
{
display: inline-block;
}
It would be great if anyone can help me. I know it can be done using JavaScript but I want to execute this using CSS3
#visible, #first{ float: left;} /* use stylesheets! not inline styles */
#first{ display:none; } /* hidden initially... */
#visible:hover + #first{ display:block; } /* show on #visible hover */
<div id="visible"> HOVER ME!</div>
<div id="first"><span class="bob">Flatkit</span></div>
#visible, #first{ float: left;} /* use stylesheets! not inline styles */
#first{display:none;}
#visible:hover + #first{ display:block; }
.one{
width:100px;
height:100px;
text-align:center;
border:1px solid red;
}
.two{
width:100px;
height:100px;
text-align:center;
border:1px solid blue;
margin-left:5px;
}
<div id="visible" class="one"> Visible </div>
<div id="first" class="two"><span class="bob">Next Div</span></div>
<html>
<head>
<style>
#first
{
display:none;
}
#visible:hover ~ #first
{
display:inline-block;
}
</style>
</head>
<body>
<div id="visible" style="float:left;">
Hello
</div>
<div id="first" style="float:left;">
<span class="bob">Flatkit</span>
</div>
</body>
</html>
I have a span on an image which I hide using display:none. Trying to show it with display:block on hover is not working. Can any one help me?
.imagegood {
position: absolute;
top: 200px;
background-color: white;
color: black;
padding: 10px;
font-size: large;
display: none;
}
.ShowHidden:hover {
display: block !important;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>
</div>
Consider following
.ShowHidden:hover .imagegood{
display:block;
}
.imagegood{
position: absolute;
top: 100px;
background-color:white;
color:black;
padding:10px;
font-size:large;
transition: 1s all;
opacity: 0;
}
.ShowHidden:hover .imagegood{
opacity: 1;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>
Used to this
.ShowHidden:hover .imagegood{
display:inline-block ;
}
Demo
Code
.imagegood{
position: absolute;
top: 200px;
background-color:white;
color:black;
padding:10px;
font-size:large;
display:none;
}
.ShowHidden:hover .imagegood{
display:inline-block ;
}
<div style="position:relative; text-align:center;margin-top: 10px; padding-right: 0px; padding-left: 0px;" class="col-sm-6 col-md-6 col-lg-4 text-center ">
<a class="ShowHidden" href="#">
<div>
<img style="width:100% ; height:auto;" class="img-responsive center-block" src="http://media02.hongkiat.com/ww-flower-wallpapers/roundflower.jpg" />
<span class="imagegood">GoodTitle</span>
</div>
</a>
<h3 style="font-weight:bold;" class="h">GoodTitle</h3>
<h5 class="h">GoodSubText</h5>
</div>
Answer is already given but for your understanding :
If you want to hide and show any element then target that element too like you hide the span so on hove use span also like this .ShowHidden:hover span
If you are hiding div then use div instead of span or you can use class/id name also.
Working Demo
What I think you should try is visibility: hidden; vs display: none;
display: none; removes it from the page - you can still interact with it in the dev tools, but can't see it where as visibility: hidden has allocated dom space.
see this answer here
Why not use JQuery
$(".imagegood")..mouseover(function() {
$( ".center-block").fadeIn();
});
you can even have it popup for 3sec
$( ".center-block").fadeIn().delay(3000).fadeOut();
take a look at this link http://api.jquery.com/fadein/
Here is my Html code for setting header and editable drop down
<div class="header" style="position:fixed; width:100%;">
<div class="container-fluid" id="continer1ForProjectContext">
<div class="row-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"><a>img style="margin-left:10%; margin-top:0.3%;" ></a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="form-group has-success" style="margin-left:30%;">
<div class="select-editable" id="select2">
<select ng-options="item.label for item countryValues track by item.id" ng-model="selectedCountry">
<input type="text" name="Country" value="select" ng-model="selectedProject.label" id="txtProject" required />
</div>
</div>
</div>
</div>
and here is the CSS which i used
#continer1ForProjectContext{
background-color: #009530;
color: #959696;
height: 65px;
}
.select-editable {
background-color:white;
width:120px;
height:18px;
position:absolute;
}
.select-editable select {
top:0px;
left:0px;
font-size:14px;
border:solid #3c763d 1px;
width:170px;
margin:0;
height:30px;
border-radius: 5px 5px 5px 5px;
position:absolute;
}
.select-editable input {
bottom:0
width:150px;
padding:1px;
font-size:12px;
border:solid #3c763d 1px;
border-bottom:none;
height:29px;
border-radius: 5px 0px 0px 5px;
position:absolute;
}
.select-editable select:focus, .select-editable input:focus {
outline:none;
}
I want the header to be fixed which is done but at the same time when i scroll down the page the editable combo box is visible over the header. what is the problem??? any help is appriciable!!!
This 'problem' is caused because position: absolute; and position: fixed; take an element out of the document flow. To make sure your 'layers' of elements are in the correct order on the z-axis, you can use z-index.
A good read with a little more information is found here.
Having problems displaying two images and one h1 tag on the same line. I want to align one image to the left and the last two elements on the right. Any tips on how to do that?
HTML
<div class="header">
<img src="meny_knapp2.png" class="meny" alt="meny link">
<img class="hioa" src="logo_hvit.png" alt="HiOA logo">
<h1 class="lsb"> Læringssenteret </h1>
</div>
CSS
.header {
height:120px;
width:100%;
background-color:#ff7f1f;
color:white;
font-size:20px;
display: table;
vertical-align:middle;
}
.meny {
height: 25px;
margin-left:0.5em;
line-height:120px;
}
.lsb {
font-size:24px;
letter-spacing:0.09em;
font-weight:lighter;
display:inline;
}
.hioa {
height: 60px;
float:right;
margin-right:1em;
}
.header * {
float: right;
}
.header img:first-child {
float: left;
}
.hioa {
height: 60px;
margin-right:1em;
}
please adjust css in class
<div class="header">
<div style="float:left;width:30%">
<img src="meny_knapp2.png" class="meny" alt="meny link" width="50"/>
</div>
<div style="float:right;width:70%">
<img class="hioa" src="logo_hvit.png" alt="HiOA logo" style="float:left;width:100px"/>
<h1 class="lsb" style="float:left;width:50%"> Læringssenteret </h1>
</div>
</div>