Develop Reference

Hover over another div on a image will interrupt my onmouseenter

https://github.com/UneSaltedFish/landingpage.git (github link to view full html/css/js)
Here I am developing a landing page, and On the right bar vector picture, I used a hover effect(When I enter this pic, It will change to another picture and there will have two clickable text on it.)
<div class="rightCon">
<img onmouseenter="right2()" onmouseleave="right1()" src="right.png" alt="right" class="right" id = "right">
<div id= "right1" class = "text"><pre> 2000<br>ARCHIVAL<br> SITE<br></pre></div>
<div id= "right2" class = "text"><pre> 2012<br>ARCHIVAL<br> SITE<br></pre></div>
</div>
and it is looks like this.
img
Here is the css code:
a{
color:black;
text-decoration: none;
}
.rightCon {
position: absolute;
color: white;
}
#right1{
z-index: 10;
position: absolute;
left:850px;
top:150px;
opacity: 0;
}
#right2{
z-index: 10;
position: absolute;
left:853px;
top:350px;
opacity: 0;
}
.text{
font-family: "Arial Rounded MT Bold", sans-serif;
font-size: 30px;
}
and the js code
function right2(){
document.getElementById("right").src = "right2.png";
document.getElementById("right1").style.opacity=1;
document.getElementById("right2").style.opacity=1;
}
function right1(){
document.getElementById("right").src = "right.png";
document.getElementById("right1").style.opacity=0;
document.getElementById("right2").style.opacity=0;
}
The problem is the onmouseenter is work when go in to right area, but when I go in to right1 and right 2 area, onmouseleave is work, which I don't want to. I want this hover only work when enter right and leave right.
After I search online, I try to make div as a child of img but I don't know How to make children of a img.And I am stuck here.
Thank you in advance for all help.

If you want the events to be on the image and the other siblings, you should put the event listeners on their parent. Now anywhere you hover in the parent, the mouse will remain.
<div class="rightCon" nmouseenter="right2()" onmouseleave="right1()">
<img o src="right.png" alt="right" class="right" id = "right">
...
Other option just pure css
.rightCon .details {
display: none;
}
.rightCon:hover .default {
display: none;
}
.rightCon:hover .details {
display: block;
}
<div class="rightCon">
<img class="default" src="http://placekitten.com/g/400/200">
<img class="details" src="http://placekitten.com/400/200">
<div class="default">FOOOOOO</div>
<div class="details">Meow</div>
</div>

Multiple images depending on mouse location when hovering over div

I am trying to do an overview page on my website so that when I hover over a div on the overview page different sections of that div show different images. Essentially a slideshow but the image changes depending on where the cursor is.
I have managed to find some code that does what I want but it uses an a href to pull in the images which means if you click it, it goes to the link of the image.
Currently I just have placeholder images in but when finished each one will have specific project images in. As each div will just be one project the whole div should go to one html link and not just a specific image link of the image the user is hovering over.
All I want is the user to click and it go to a html link and not an img link.
Here is the code I am using:
The coding savvy people out there will probably have a much better solution for what I would like to achieve, I am interested to see any better solutions.
HTML
<div class="multi">
<ul class="rotator-nav fifth clearfix">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="imgcontent">
<ul class="rotator-icons fifth">
<span class="img1 active"></span>
<span class="img2"></span>
<span class="img3"></span>
<span class="img4"></span>
<span class="img5"></span>
</ul>
<img src="/img/FoI.jpg" class="currentimg">
</div>
</div>
CSS
.multi {
display: block;
float:left;
position: relative;
width: 30.8%;
height: 20%;
padding: 0px;
margin:0% 1% 2% 1%;
overflow: hidden;
}
.multi .imgcontent {
display: block;
position: absolute;
top: 0px;
}
.imgcontent img {
display:block;
width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
}
.rotator-nav {
display: block;
position: relative;
width: 100%;
height: 100%;
z-index: 9;
}
.rotator-nav li {
display: block;
float: left;
height: 100%;
}
.rotator-nav.fourth li {
width: 25%;
}
.rotator-nav.fifth li {
width: 20%;
}
.rotator-nav li a {
display: block;
float: left;
width: 100%;
height: 100%;
border-bottom:0px solid #fff
}
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
JS
$(function(){
var $rotators = $('.multi');
var $imglinks = $('.rotator-nav a');
$imglinks.on('mouseenter', function(e){
var imgclass = '.'+$(this).attr('class');
var imglink = $(this).attr('href');
// update main image src
$(this).parent().parent().parent().find('.currentimg').attr('src',imglink);
// update current rotator icon
var $rotators = $(this).parent().parent().parent().find('.rotator-icons');
if($rotators.children(imgclass).hasClass('active')) {
// already active icon -- do nothing
} else {
// remove active class then add to new icon
$rotators.children('span').removeClass('active');
$rotators.children(imgclass).addClass('active');
}
});
});
Any help would be greatly appreciated!
Thanks,
Mark

I think you could best use a data attribute for this instead (if I understand the intention correctly) :
var imglink = $(this).data('image');
<div class="multi">
<ul class="rotator-nav fifth clearfix">
<li>
<a data-image="/img/FoI.jpg" href="#" class="img1"></a>
</li>
<li>
<a data-image="/images/card.jpg" href="#" class="img2"></a>
</li>
<li>
<a data-image="/images/amareal.jpg" href="#" class="img3"></a>
</li>
<li>
<a data-image="/images/edeva.jpg" href="#" class="img4"></a>
</li>
<li>
<a data-image="/images/amacover2.gif" href="#" class="img5"></a>
</li>
</ul>
...
If you'd still like to see the image over the original div, a pseudo element could be used. Advantage there is that they are not actual DOM elements and will not register clicks :
Demo
Now it would be great if the data attribute could be directly used for the content of the pseudo element as well but that doesn't seem possible. And you can't target them with JavaScript so each image would have to be defined with nth-of-type() in the stylesheet additionally.

You don't need to use .parent().parent()
Just use the parent's class to find the item.
Your $(this).parent() * 3 is the $(".multi")
So your $rotators can't find .rotator-icons,
you need to use one more parent or use siblings
And I suggest do not use class if there are no need to do one thing to lots of items.

Toggle display:none with div in front of another div?

I'm trying to make a div that I have on top of another div show up when you click on something.
This is the code for the two divs, without all the stuff that's within each:
<div id="randomarticle_enlarge">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
<div class="bodybag">
<h1></h1>
<h4></h4>
<p></p>
<p></p>
</div>
Then I have css for each, of course:
.bodybag {
width:960px;
}
#randomarticle_englarge {
height:750px;
width:960px;
position:absolute;
z-index:2;
margin-top:1px;
padding-left:20px;
padding-right:20px;
display: none;
}
Am I supposed to have the bodybag class have a z-index and a position:relative? Because even though I don't it's working (at this point).
Anyway, I have this script written that's doing exactly what I want it to do:
$(document).ready(function() {
$('.popular').click(function() {
$('#textmask').fadeTo( 'fast', 0.1);
$('#backgroundmask').css('background-color', 'white');
});
});
And all I want to happen next is that as the textmask and the backgroundmask fade in/change as they should and do, is for the randomarticle_enlarge div to show up.
I've tried using .toggle and .toggleClass and .slideToggle and .show but nothing is working.

Absolute positioning must be relative to a container. In order to absolutely position something you need to indicate what it's absolutely positioned to. Something along these lines.
<div id="randomarticle_englargeContainer">
<div id="randomarticle_englarge">
</div>
<div class="bodybag">
</div>
</div>
#randomarticle_englargeContainer {
position: relative;
}
.bodybag {
position: absolute;
left: 0;
top: 0;
}

When copying everything from above I have no issues using $('#randomarticle_englarge').toggle();. Check your browser's console for errors; you might find the answers there.

I'm not exactly sure about what would you like to do with the divs, but I created an example for you, maybe this is what you want:
LIVE DEMO
So there is two divs. The 2nd div covers the 1st one. Clicking on a 'button' hides the 2nd div, so the 1st one reveals. Clicking again the 'button', the 2nd div appears and covers the 1st one again.
HTML:
<div class="popular">Click me!</div>
<div class="container">
<div id="randomarticle_enlarge">
<h1>A</h1>
<h4>B</h4>
<p>C</p>
<p>D</p>
</div>
<div class="bodybag">
<h1>E</h1>
<h4>F</h4>
<p>G</p>
<p>H</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.bodybag {
width: 100px;
height: 200px;
background-color: red;
}
#randomarticle_enlarge {
width: 100px;
height: 200px;
background-color: green;
position: absolute;
top: 0;
left: 0;
}
.hide {
display: none;
}
jQuery:
$(document).ready(function() {
$('.popular').click(function() {
$('#randomarticle_enlarge').toggleClass('hide');
});
});

Using CSS hover class to hover over a link and display an overlay image elsewhere on the page

I was trying to figure out if there was a way to use CSS to hover over a link and make an overlay of an image show elsewhere on the page. I am making a website that has a map, and what I want to accomplish is that when they hover over a link to the corresponding location the map would sort of highlight the location of what it is they are hovering over to get a better understanding of where the place is and not have to search for it. What I am getting now is that I have to hover over the location on the image and then I get the effect but I want the effect when I hover over the link.
Any suggestions?
Thank you
I apologize for the lack of code you guys.
Here are the divs that I am using to create some simple overlays. Just some color blocks.
<div class="roomOverlay blue" id="conf_sanchez"></div>
<div class="roomOverlay red" id="conf_CIO"></div>
<div class="roomOverlay green" id="conf_10F"></div>
<div class="roomOverlay brown" id="Fuster"></div>
and here is the css
.blue:hover { background-color: Blue; }
.red:hover { background-color: red; }
.green:hover { background-color: green; }
.brown:hover { background-color: brown; }
#conf_sanchez {
height: 104px;
width: 96px;
left: 876px;
top: 14px;}
#conf_CIO {
height: 146px;
width: 69px;
left: 7px;
top: -92px;}
#conf_10F {
height: 67px;
width: 115px;
left: 194px;
top: 193px;}
#Fuster {
height: 139px;
width: 129px;
left: 180px;
top: -17px;}
FIXED What I had to do was a script since it became difficult positioning with the HTML and CSS. I used the data-overlay tag in my HTML as so.
<dl> <dt><a href="#" **data-overlay="#Fuster"**>Fuster Conference Room - W Side behind small break room</a></dt>
<dd>-Projector</dd>
<dd>-Computer</dd>
<dd>-Polycom</dd>
<dd>-Seats 8-10 people</dd>
<dd>-4 White Boards</dd>
</dl>
JQuery Script:
$(function () {
$('.roomOverlay').css("visibility", "hidden");
$('a').hover(function () {
var overlay = $(this).data("overlay");
$(overlay).css("visibility", "visible");
}, function () {
var overlay = $(this).data("overlay");
$(overlay).css("visibility", "hidden");
});
});
Here is the page showing the result for it. It does not show image for security purposes but the effect works on the empty image. :)

For a CSS-only solution, you may want to look into child selectors.
This will allow you to hover over the parent and show the child.
For instance
HTML
<div id="parent">
<div id="child">
</div>
</div>
CSS
#parent { properties }
#child {properties; height: 0}
#parent:hover > #child { height: 200px; properties}
Idea based off of provided code: http://jsfiddle.net/derekstory/nDyWF/1/
As others have mentioned, you may be better suited with a JS/Jquery solution. This is a bit dirty, but it is possible.

I know you specified using css for this problem, but using JS(jQuery) will make the answer more flexible for larger projects.
HTML
<img class="image" src="http://media-cdn.tripadvisor.com/media/photo-s/00/1d/3d/32/new-york-city.jpg">
<img class="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRCk4R8uFRe5EnqH9KrV3u-K1VcCp3y_qSG8vezNG5uSX7G-FMHvQ">
<img class="image" src="http://images1.fanpop.com/images/image_uploads/New-York-City-new-york-1020054_1024_768.jpg">
<img class="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSF_1ueOgxtgkT8HFuwO3f3K5fEtUxJtC-IICVWYcXJkchmgT1c">
<div class="links">
Option 1
Option 2
Option 3
Option 4
</div>
This sets up a templete for us to display the images specified. When the user hovers over a link, the corresponding image will display.
CSS
img.image {
position: relative;
top: 0;
left: 0;
display: none;
width: 300px;
}
img.active {
display: block;
}
.links {
position: absolute;
bottom: 0;
}
This just sets some basic positioning. The .active is the class that will be applied to the current image. It will change the display from none to block.
jQuery
$(function() {
$('a').hover(function() {
var item = $('a').index(this);
$('.image').removeClass('active');
$('.image').eq(item).addClass('active');
});
});
This is where the magic happens. When the user hovers over a link, jQuery determines which link is hovered by taking its index. Then jQuery takes that index and finds an image with the same index and adds the class .active to it. Therefore, no matter how large a project is and how many links and images you have, it is scalable to whichever size project.
The same concept is used by slideshows.
Here is an example of this in action: http://codepen.io/anon/pen/nCDhG

You could do some stuff with positioning. Let's break out the ASCII art:
<div>
------------------------------------------------------
| | <img class="map"> |
| <a>This is link | |
| <span>Overlay</span> | |
| </a> | |
| | |
| <a>This is another link | |
| <span>Overlay</span> | |
| </a> | |
| | |
------------------------------------------------------
</div>
CSS
div {
position: relative;
}
div img,
div a span {
position: absolute;
top: 0;
right: 0;
}
div img {
z-index: 5;
}
a span {
display: none;
z-index: 10;
}
a:hover span {
display: block;
}
I don't think a:hover span will work in IE 6, but it should do in other browsers.

Use JQuery:
$("#link1").hover(
function () {
$('#map1').show();
},
function () {
$('#map1').hide();
}
);
The first is mouse-in the second function is mouse-out.

Two photos positioned on each other. Show one on hover. Possible with css or only javascript?

What I want to do is to show the top photo (which is set to visibility: hidden) on hover. I have two photos positioned on each other like this:
<div class="frame">
<img src="./img/portfolio/default1.jpg" width="300" height="178" alt="Title Here"></a>
<div class="boxwrapper" style="visibility: hidden;"></div>
</div>
Added the second photo through css:
.boxwrapper {
background: url("../img/boxPlus.gif");
position: relative;
width: 300px;
height: 178px;
left: -6px;
top: -184px;
z-index: 1000;
}
Is it possible to do with css? Tried (and several more options):
#frame img:hover .boxwrapper {
visibility: visible;
}
But it is not working. Or this is only possible with javascript? If yes, please give some tips as I am not too much of javascript guy. Thanks!

You could set the photo as background of the boxwrapper
.boxwrapper{
background: url("../img/boxPlus.gif");
}
.boxwrapper:hover{
background: url("../img/portfolio/default1.jpg");
}
if this is not possible you could add it as background trough a style attribute inside your html
<div class="boxwrapper" style="background: url('../img/boxPlus.gif');" ></div>

You'd have to put the :hover class on a parent container. CSS does not allow such things to trickle "up" the tree, only down.
.boxwrapper {
display: none;
}
.frame:hover .boxwrapper {
display: block;
}