Develop Reference

How to show a dropdown when you hover over a specific area an on image? (HTML, CSS)

Is it possible to show a dropdown whenever you hover over some specific area on an image? For example, if my mouse is within 50,62 and 70,80. I already tried this with invisible boxes and divs, but the only way I could get them to overlay the image was with position properties, but they wouldn't stay in place if I reshaped or resized the screen. Any ideas?

Demo : http://jsfiddle.net/v8dp91jL/12/
The code is pretty self-explanatory.
Just two imp things:
Everything should be in %
the .dropdown is inside .hover-area so that when you move your mouse from .hover-area to .dropdown, .dropdown doesn't disappear because it is still technically inside .hover-area even tho it's visually not

You can add some hidden element (span) positioned on some specific area and it is going to trigger the hover:
HTML:
<div class="image-wrapper">
<span class="image-hover-trigger"></span>
<img src="..." >
<div class="dropdown"></div>
</div>
CSS:
.image-wrapper { position: relative; }
.image-hover-trigger { position: absolute; top: 20%; left: 20%; right: 20%; bottom: 20%; }
.dropdown { display: none; }
.image-hover-trigger:hover ~ .dropdown { display: block; }

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.

clicking one hyperlink to change the css styles of more than one different divs

I am having different div's on my website and I would like to do following
when I am clicking one link, that will trigger a change inside the css code of more than one div's. For example if I click on clients I would like to make the ul element with class="rslides" to get property of heigh="0px" and than another div layer to expand below this one.
But I have 2 problems:
first is that I am using a responsive slider for which i to make its height="0px" , I have to change the class property.
other issue is how to make one link trigger 2 actions for the second div. I tried with triggers but it is limited to one element per "id"
DOM Structure:
<div id="slider">
<div id="index_slider">
<ul class="rslides" >
<li><img src="img/index_design_02.jpg"></li>
<li><img src="img/index_design_03.jpg"></li>
</ul>
</div>
</div>
JS CODE:
<script src="js/responsiveslides.min.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
speed: 1000,
maxwidth: 1200
});
});
</script>
<div id="menu">clients</div>
<div id="second_slider"></div>
THE CSS CODE fot the both tirgers of the slider:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
-webkit-transition:all 1s ease-in-out;
}
.rslides:target {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
height:0px;
}
Here is link to JSfiddle
where my goal is once clicked on the link the div called "menu" to go on the top with sliding transition and the other div called "second_slider" to expand on the bottom, and the slider to disapear.

Depending on your markup, you should be able to target more than one div. The only limitation would be each target must a child of your link target.
<div class="rslides">
<div id="target-a">
<div class="sub-target-one"></div>
<div class="sub-target-two"></div>
</div>
</div>
The way you would go about it is like this:
.rslides:target > .sub-target-one,
.rsiides:target > .sub-target-two {
/* rules go here */
}

Wrap a Span Using Jquery

I have toggle menu. The code is working fine, the problem is the first time there is a span inside the but when I click on the menu the span is missing. I'm using this span to show the down arrow. I need to wrap a span inside as shown as the below code on every click. Here is my code
<div class="col-sm-12 seach-blk">
#selectedProductType <span></span>
<div id='cssmenu'>
<ul>
<li>categoryName 1</span> </li>
<li>categoryName 2</span> </li>
</ul>
</div>
</div>
Jquery
$(document).ready(function () {
// Initially hide submenu
$('#cssmenu').hide();
$('#open-menu').click(function (e) {
//Prevent href
e.preventDefault();
// Toggle the menu item
$('#cssmenu').toggle();
});
});
CSS
.srch-btnnew span {
position: absolute;
right: 15px;
background: url(../images/down-arrownew.png) repeat-x;
width: 12px;
height: 9px;
top: 22px;
}
Thanks

You are using empty html <span></span> that's why the browser might be removing that. So try using <span> </span>
Or you could put some text in span and use font-size: 0; for that.
Also try e.stopPropagation() instead of e.preventDefault()

Your code is working fine. Not span removed when clicking a tag.
I have tested in jsfiddle find the below link
JSFIDDLE LINK
I m not sure ,maybe in your a tag need space like ('&nbsp') otherwise CSS is affecting your arrow path
CODE :
// Initially hide submenu
$('#cssmenu').hide();
$('#open-menu').click(function (e) {
//Prevent href
e.preventDefault();
// Toggle the menu item
$('#cssmenu').toggle();
});

The <span> element is not being removed. It is an inline element, and therefore width and height do not apply to it. You can change it to a block element by adding display: inline-block; to the styling.
.srch-btnnew span {
display: inline-block; /* <-- Add this to make it a block element */
position: absolute;
right: 15px;
background: url(../images/down-arrownew.png) repeat-x;
width: 12px;
height: 9px;
top: 22px;
}

jQuery Mobile listview, Adding vote buttons to a line item

I want to add 2 vote buttons to the left hand side of a jQuery mobile listview. The vote buttons should be centered in the list item, and should be on the left-hand side.
I have sort of gotten this to work using javascript, but what I really want to do is to get this to work without any additional javascript and use the standard jquery mobile data-role attributes and enhancement with pure HTML & CSS.
Here is the HTML markup that I would like to use:
<div data-role="page">
<div data-role="content">
<ul class="has-vote-btns" data-role="listview">
<li>
<a href="#">
<h3>Line Item</h3>
<p>Sub title</p>
</a>
</li>
</ul>
</div>
</div>
Here is the CSS:
.vote-btn {
position: absolute;
top: 50%;
left: 5px;
z-index: 2;
}
.vote-btn .ui-btn-inner {
padding: 0;
}
.like-btn {
margin-top: -30px;
}
.dislike-btn {
margin-top: 0px;
}
.has-vote-btns .ui-link-inherit {
padding-left: 40px !important;
}
.has-vote-btns .ui-li-has-thumb .ui-link-inherit {
padding-left: 118px !important;
}
This does not work (live example).
I was, however, able to get it to work but only by removing the 2 vote buttons in the HTML markup and then adding some javascript to add the buttons dynamically after the listview has already enhanced.
Here the javascript I added to make it work (live example):
$(function(){
$('.has-vote-btns').each(function() {
$(this).find('li').each(function(i, li){
$('').buttonMarkup({
icon: 'arrow-u',
iconpos: 'notext'
}).appendTo(li);
$('').buttonMarkup({
icon: 'arrow-d',
iconpos: 'notext'
}).appendTo(li);
});
});
});
But this second approach of adding the 2 vote buttons after the enhancement is inconvenient. It would be much better if I could do this with plain HTML and CSS rather than hacking in those buttons after the enhancement.
Is there any solution to this that does not use javascript to insert the vote buttons?

I have updated your first fiddle with a CSS only solution:
FIDDLE
It is not the only way to do this, but I believe it solves your issue.
The <ul> HTML is changed as follows:
<ul class="has-vote-btns" data-role="listview" data-split-icon="bars" data-split-theme="d">
<li>
<a href="#">
<h3>Line Item 1</h3>
<p>Sub title 1</p>
</a>
<div class="vote-btns">
</div>
</li>
</ul>
I set the data split icon and theme at the <ul> level (data-split-icon="bars" data-split-theme="d") and in the <li>, I put the voting buttons in their own container so it can be positioned at the left. Here is the CSS that positions the container and the 2 buttons within the container:
.has-vote-btns .ui-link-inherit {
margin-left: 40px !important;
}
.vote-btns {
position: absolute;
top: 0px;
width: 39px;
bottom: 0px;
}
.vote-btns a:first-child {
position: absolute;
bottom: 50%;
margin-bottom: 2px;
}
.vote-btns a:last-child {
position: absolute;
top: 50%;
margin-top: 2px;
}
Of course you don't have to use the :first-child and :last-child pseudo selectors; you could use your like-btn and dislike-btn classes...
Here is an updated FIDDLE for jQM 1.4.x