Working to add a simple image description/text-box appear over an image when it's hovered.
When I don't worry about the hover and just switch the visibility to visible on my span, it's exactly what I'm looking for.
I would've thought that simply using visibility:hidden and visibility:visible on the hover state would've worked, but it's not coming up.
I think I'm having a positioning problem, but I'm clearly overlooking something and have probably been staring at this for too long.
Abridged HTML:
<div id="gallery">
<ul>
<li>
<a href="full-size-image.jpg"><img src="tumbnail.jpg"/>
<span class="image-caption">Image Caption Text</span></a>
</li>
<li>
<a href="full-size-image.jpg"><img src="tumbnail.jpg"/>
<span class="image-caption">Image Caption Text</span></a>
</li>
</ul>
</div>
Abridged CSS:
#gallery {
width:100%;
margin:auto;
}
#gallery ul {
list-style:none;
margin:0;
padding:0;
}
#gallery ul li {
display:inline;
position:relative;
margin:0;
padding:0;
}
#gallery ul li span {
visibility:hidden;
position:absolute;
width:100%;
left:0;
bottom:0px;
z-index:3;
background:rgba(0,0,0,.6);
color:#FFF;
text-align:center;
}
#gallery ul li span:hover {
visibility: visible;
}
call the :hover on the li instead of the span and target the span
#gallery ul li:hover span {
visibility:visible;
}
FIDDLE
Also remove the ; on that hover statement:
#gallery ul li span:hover; <---- {
Related
I have used the global element selector a:hover{} for hovering over most elements in the web page. But for all the elements in the footer, I would like to override the hovering effect.
So my question is how can I override the element selector a:hover{} when it is used elsewhere since I don't want all the a elements to hover
HTML
<body>
<div class="header">
<div class="header_logo">
<img id ="logo" src="civic-logo.jpg">
</div>
<div class="header_title">
<div id="titles">
<ul>
<li>ABOUT CIVIC<li>
<li>PRODUCTS
<ul>
<li>CEMENT</li>
<li>STEEL</li>
<li>BRICKS</li>
<li>SAND</li>
</ul>
</li>
<li>CONTACT US </li>
</ul>
</div>
</div>
</div>
<div class="content">
<img src="images/clt3.jpg">
</div>
<div class="footer">
<div class="footer_upperspace">
<ul>
<li>CIVIC HOME</li>
<li>INQUIRY</li>
</ul>
</div>
</div>
</body>
CSS
/*Main Header Container */
.header{
color:#FFFFFF; /*White Color*/
height:60px;
width:100%;
margin:auto;
}
/*Inner Logo Container on the left*/
.header_logo{
width:40%;
height:100%;
float:left;
}
#logo{
height:100%;
top:0;
left:0;
width:50%;
}
/*Inner Title Container on the right*/
.header_title{
width:60%;
float:left;
}
#titles{
position:absolute;
top:20px;
font-family: "Times New Roman", Times, serif,Georgia;
font-size:97%;
color:#B8B8B8;
}
ul{
list-style-type:none;
}
li{
display:inline-block;
}
a{
text-decoration: none;
color:inherit;
padding: 21px 10px;
}
ul a:hover{
background-color:#666699; /*Purple Color */
}
ul li ul{
display:none; /*Hiding The Child Elements*/
}
li ul li{
padding: 21px 10px;
background-color:#666699 ;
}
ul li:hover ul{ /*For all the ul elements whose parent is being hovered over*/
display: block;
position: absolute;
width: 100%;
top: 40px;
left: 0;
white-space: nowrap;
}
ul li ul li:hover{
background-color:#C0C0C0;
}
*{border:0;
margin:0;
padding:0;
}
/*Main Content Section*/
.content{
height:525px;
margin:auto;
background-color:#C0C0C0;
}
img{
width:1280px;
height:515px;
}
/*Footer*/
.footer {
margin:auto;
background-color:#707070;
height: 100px;
}
.footer_upperspace {
background-color:#C0C0C0;
height:40%;
}
I have attached the JSFiddle to give you an insight of what I am doing
https://jsfiddle.net/rajivsr2309/b2o3Lzny/
You can always use a stricter selector (with higher specificity) to override the less strict one. For example:
a:hover {color: red}
a.cancel:hover {color: green}
Some link
Some link
Some link
Some link
Some different link
Some link
In your case, the selector is: .footer a:hover: https://jsfiddle.net/b2o3Lzny/2/
Again, since you're trying to undo a general rule, perhaps your approach is wrong and you could consider making a specific class just for those anchors you want to style, not all of the anchors, and then undo many of them.
Try this:
.footer a:hover { background-color: yellow; }
Revised Demo
With .footer preceding a:hover, this is now a descendant combinator selector which matches only hovered anchor elements that exist within elements with class footer.
I have looked all over for this and I can't seem to figure it out. I have a list of links that show an image when hovering over each one. I also have a default image in that same place holder when no links are being hovered over. How do I make that default image disappear when the links showing their images. I don't want to use backgrounds to cover the default image.
https://jsfiddle.net/76tnfh96/2/
HTML:
<div class="links">
<p class="default_img"><a><img src="http://thedeskdoctors.com/Images/LifePreserver.jpg"></a></p>
<ul id="over" class="links">
<li><a>Link 1<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/09/IPOLogo.png"></span></a></li>
<li><a>Link 2<span><img src="http://mojosimon.files.wordpress.com/2011/12/large-company.jpg?w=600"></span></a></li>
<li><a>Link 3<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business-300x200.jpg"></span></a></li>
</ul>
</div>
CSS:
<style type="text/css">
.links .default_img a {
top:100px;
float:right;
width:100px;
height:100px;
background:#000000;
position:absolute;
display:none;
}
/*Link position*/
ul.links {
list-style:none;
padding:0;
width:100px;
}
.links li {
width:200px;
color:#000000;
}
/*Hover Image Position/transition out*/
.links li a span, .links li a b {
position:absolute;
right:8px;
top:-999em;
display: none;
}
.links li a:hover span {
top:24px;
display: block;
}
</style>
With jquery:
$("li a").mouseenter(function() {
$(".default_img").eq(0).hide();
});
$("li a").mouseleave(function() {
$(".default_img").eq(0).show();
});
You can leave your whole Markup like what you already had, and add this JavaScript code to your page. You do not need to add any frameworks, and this runs on all browsers.
var links = document.querySelectorAll("#over a");
[].forEach.call(links, function(value) {
var default_image = document.querySelector(".links .default_img a");
value.addEventListener("mouseover", function(){
default_image.classList.add("hidden");
});
value.addEventListener("mouseleave", function(){
default_image.className = default_image.className.replace(/\hidden\b/,'');
});
});
Example
(The example might lag a bit because your CSS moves your images like wild)
Example 2
(Moved the images for better testing purposes)
Just changed a couple of things so you don't have to use jQuery/javascript. To be able to hover action another non dependent element you would need javascript as that would be called a disjointed rollover.
<ul id="over" class="links">
<li><a>Link 1<span><img src="http://thedeskdoctors.com/Images/LifePreserver.jpg"></span></a></li>
<li><a>Link 2<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/09/IPOLogo.png"></span></a></li>
<li><a>Link 3<span><img src="http://mojosimon.files.wordpress.com/2011/12/large-company.jpg?w=600"></span></a></li>
<li><a>Link 4<span><img src="http://innovativeprofessionaloffices.com/wp-content/uploads/2014/07/seo-for-small-business-300x200.jpg"></span></a></li>
</ul>
</div>
<style type="text/css">
/*Link position*/
ul.links {
list-style:none;
padding:0;
width:100px;
}
.links li {
width:200px;
color:#000000;
}
/*Hover Image Position/transition out*/
.links li a span {
position:absolute;
left:200px;
display: none;
}
.links li a span img {
width: 100px; height:100px;
}
.links li a:hover span {
top:24px;
display: block;
background: none;
}
.links li:first-of-type a span, .links li:first-of-type a:hover span{
display:block;
background: url(http://thedeskdoctors.com/Images/LifePreserver.jpg) no-repeat 0 0;
}
</style>
Changed image sizes just so it would fit in view while testing.
so i have a situation where i want text to appear over an image using visibility:hidden/visible and also playing with opacity. i cannot do it for some reason. Note that this is in a list because i have other images displayed in the same list but here i am only showing one. below is the html:
<ul>
<li>
<a class="pic" href="#">
<img alt="" src="/servlet/servlet.FileDownload?file=00PU00000096kH2MAI" style="width: 300px; height: 160px;" />
</a>
<div class="hovertext"> my hover text</div>
</li>
</ul>
and the css is here:
#gallery ul{
margin:0;
padding:0;
list-style:none;
}
#gallery li{
display:block;
float:left;
width:310px;
height:170px;
margin:0 15px 15px 0;
}
#gallery li a{
display:block;
float:left;
width:300px;
height:160px;
margin:0;
padding:4px;
}
#gallery li a:hover {
color:#FFFFFF;
opacity:0.6;
background-color:#666666;
}
#gallery li a:hover .hovertext{
visibility:visible;
}
.hovertext{ width:300px; height:85px;
background-color:#666666;
opacity:0;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
all this does is allow me to see that the image is opaque and i can see that the div is in the background but i just cannot bring it forward to display in front of the opaque text. Any help would be greatly appreciated.
Look at the following code.
#gallery li a:hover .hovertext{
visibility:visible;
}
The above code will look the child element of hovertext when you hover the link. In your case, it is siblings element. So update your CSS like below.
#gallery li a:hover + .hovertext{
visibility:visible;
}
Also you have added opacity:0 for hovertext class. I think there is no need for that one. Because already you have visibility:hidden for the same class. So update your CSS like below.
.hovertext{ width:300px; height:85px;
background-color:#666666;
visibility:hidden;
display:block;
text-align:justify;
color:#000000; font-size:20px;
}
DEMO
Have a look at http://www.habitatlandscape.co.uk/
In Firefox and even Internet Explorer (!!!) the pop-up menus appear perfectly, vertically centered in the white strip, and always starting on the far-left-hand-side.
In Chrome, the menus start horizontally under the parent li, and are not centered vertically. I can fix the vertical alignment by targetting webkit with a different position, but I can't fix the horizontal alignment.
Why is Webkit ignoring position:absolute;left:0;?
CSS:
#header #menu
{
margin:0;
padding:0;
}
#header #menu ul
{
list-style-type:none;
margin:0;
padding:0;
margin-top:28px;
height:24px;
}
#header #menu ul li
{
display:inline;
position:relative;
}
#header #menu ul li a
{
display:block;
float:left;
padding:7px;
padding-bottom:3px;
background:#fff;
margin-right:5px;
text-decoration:none;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
font-family:'museo', serif;
font-size:12px;
text-transform:uppercase;
color:#fff;
font-weight:bold;
padding-left:12px;
padding-right:12px;
background:#01973D;
position:relative;
z-index:2;
}
#header #menu ul li:hover a
{
background:#00BB4A;
}
#header #menu ul li ul
{
clear:both;
display:none;
position:absolute;
top:39px;
width:700px;
margin:0;
padding:0;
}
#header #menu ul li ul li
{
display:block;
}
#header #menu ul li ul li a
{
background:#fff !important;
color:#000;
font-weight:normal;
padding:7px;
padding-left:11px;
color:#01973D;
padding-top:10px;
margin:0;
float:left;
}
#header #menu ul li ul li a:hover
{
color:#000;
}
#header #menu ul li:hover ul
{
display:block;
}
HTML (CMS-generated):
<div id="menu">
<ul>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/about-us/"><span>About Us</span></a>
<ul>
<li><span>Company History</span></li>
<li><span>Meet The Team</span></li>
</ul>
</li>
<li class="parent"><a class="menuactive parent" href="http://www.habitatlandscape.co.uk/portfolio/"><span>Portfolio</span></a>
<ul>
<li><span>View before, during and after photos from recent projects</span></li>
</ul>
</li>
<li class="parent"><a class="parent" href="http://www.habitatlandscape.co.uk/services/"><span>Services</span></a>
<ul>
<li><span>Design</span></li>
<li><span>Patios</span></li>
<li><span>Decking</span></li>
<li><span>Turf</span></li>
<li><span>Ponds</span></li>
<li><span>Driveways</span></li>
<li><span>Fencing</span></li>
<li><span>Electrics</span></li>
<li><span>Structures</span></li>
</ul>
</li>
</ul>
// etc
</div>
You've created a mess by display:inline-ing your <li> elements but display:block-ing your <a> elements.
In HTML, it's invalid to nest a block-level element in an inline element:
<span><div>FAIL</div></span>
When you do something like this, you're going to have cross-browser problems. The same goes if you use CSS to change the display property:
<div style="diplay:inline"><span style="display:block">STILL A FAIL</span></div>
Which is what you've done:
#header #menu ul li {
display: inline;
/* ... */
}
#header #menu ul li a {
display:block;
/* ... */
}
That behavior is more or less undefined as far as the specs are concerned (since it makes no sense) so the browser reserves the right to do something insane or ridiculous - which is what you're seeing. It works in Firefox only because you're getting lucky and it works in Internet Explorer because Internet Explorer is inherently insane and ridiculous.
If you want those <li> elements to stack horizontally, float:left them instead of inlining them. Then you can display:block your <a> element without issue. Once that's done you'll still have to switch up which elements are position:relative;-ed, and probably add a left:0 somewhere.
Here's an example of your current issue on jsfiddle, and here's an example of my suggested fix on jsfiddle, which involves positioning the #header #menu ul element relatively instead of the #header #menu ul li.
When I gave the #header #menu ul li a display:inline-block; it fixed it. It also changed the result of the hidden ul's top positioning, which should be 24px to match the height if the button anyways, right?
I'm using CSS for creating a dropdown menu, but I don't know what's going wrong with it. It's not dropping the sub-menu (un-ordered list in my code)
when hover is fired. I'm badly stuck here, please help me out.
I also tried the visibility property instead of display. I could see only
menu1, menu2, menu3 in browser horizontally and nothing else.
I'm using IE7 on XP SP3.
CSS:
#navMenu ul{
argin:0;
padding:0;
}
#navMenu li {
margin:px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li : hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}
HTML:
<div id="wrapper" >
<div id="navMenu">
<ul>
<li>menu1
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu2
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</li>
<li>menu3
<ul>
<li>menuitem11</li>
<li>menuitem12</li>
<li>menuitem13</li>
<li>menuitem14</li>
</ul>
</ul>
</div>
</div>
JSFiddle
There mustn't any space between the tag name and pseudo class like you must use li:hover instead of li : hover.
Your style has become messed up. It's missing units and/or values. This seems to work. You can see it here.
#navMenu ul{
margin:0;
padding:0;
}
#navMenu li {
margin:0px;
padding:0;
position:relative;
float:left;
display:block;
list-style:none;
}
#navMenu li a{
text-align:center;
text-decoration:none;
width:100px;
display:block;
}
#navMenu ul ul{
display:none;
}
#navMenu ul li:hover ul {
width:auto;
position:absolute;
background:#453DD;
display:block;
}