How to rollover image with jquery?

How to rollover image with jquery? - javascript

I'm new in js, I need to change several images at hover on the same imagine like this : http://www.revzilla.com/ on slider, any suggest?
thi is my html, in ct-image I have several images that move your mouse inside the container replaces with the other imgs :
<li class="product-primary clearfix">
<a href="https://validator.w3.org/nu/#textarea">
<div class="ct-image" style="background:url(imgs/product1.jpg)" data-image="imgs/product1.jpg" data-alt="">
<div class="banner-new"><span>new</span>
<p class="title-product-hidd">lorem</p>
</div>
<!--.banner-new-->
<div class="banner-acti">
<ul>
<li></li>
<li></li>
</ul>
</div>
</div>
<!--.banner-acti-->
</a>
<!--effetto all'hover-->
<div class="ct-hove">
<div class="text-pro">
<p class="text">I</p>
<p class="text">I</p>
<p class="tex">I</p>
</div>
<ul>
<li class="compare-icon"><i class="fa fa-eye"></i>
</li>
<li class="buy-icon"><i class="fa fa-heart-o"></i>
</li>
<li class="wishlist-icon"><i class="fa fa-database"></i>
</li>
</ul>
</div>
<!--.ct-hover-->
<div class="ct-descript-prod-left">
<p class="title-prod">Name</p>
<p>Lorem ipsum dolor sit amet, consectetur</p>
</div>
<!--.ct-descript-pro-bt-->
<div class="ct-descript-prod-right">
<h4>€ 0.000.00</h4>
<ul>
<li class="imgLink" data-target="#">
<a href="#">
<img src="">
</a>
</li>
<li class="imgLink" data-target="#">
<a href="#">
<img src="">
</a>
</li>
</ul>
</div>
<!--.ct-descript-pro-bt-->
</li>

Simplest solution I have found for you:
$(document).ready(function() {
var timeout;
var flipImages = function($container) {
var amount = $container.data("amount");
var current = $container.data("current");
if(current >= amount){
current = 1;
} else {
current = current + 1;
}
var dataAttr = "image" + current;
var image = $container.data(dataAttr);
$container.fadeOut(200, function() {
$container.css("background-image", "url(" + image + ")");
$container.fadeIn(200);
$container.data("current", current);
});
timeout = setTimeout(function() {
flipImages($container);
}, 1000)
};
$(".ct-image").hover(
function() {
var $that = $(this);
timeout = setTimeout(function() {
flipImages($that);
}, 1000)
},
function() {
if(timeout) {
clearTimeout(timeout);
}
}
);
});
.ct-image {
display: block;
height: 300px;
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ct-image" style="background-image:url(http://dummyimage.com/300x300/00eb1b/fff)"
data-image1="http://dummyimage.com/300x300/00eb1b/fff"
data-image2="http://dummyimage.com/300x300/0c00eb/fff"
data-image3="http://dummyimage.com/300x300/eb8500/fff"
data-image4="http://dummyimage.com/300x300/eb0014/fff"
data-current="1"
data-amount="4">
<!-- your content-->
</div>
Note. Solution is without flipping animation. It requires change in structure of your code.

are you looking for something like that ?
$('.carousel').mouseleave(function(){
var currentActiveImage = $('.item-show');
var nextActiveImage = currentActiveImage.next();
if(nextActiveImage.length == 0)
{
nextActiveImage = $(".carousel #item").first();
}
currentActiveImage.removeClass('item-show').addClass('item-hidden');
nextActiveImage.addClass('item-show').removeClass('item-hidden');
});
.item-show {
display: inline-block;
}
.item-hidden{
display: none;
}
.info {
position:absolute;
top: 231px;
left: 505px;
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel">
<div id="item" class="item-show">
<img src="http://www.bu.edu/khc/files/2012/09/Video11_700x300.jpg" />
<div class="info">
<span>some text</span>
<p>Price: 88$</p>
</div>
</div>
<div id="item" class="item-hidden">
<img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/traffic-700x300.jpg" />
<div class="info">
<span>This is Cool</span>
<p>Price: 99$</p>
</div>
</div>
<div id="item" class="item-hidden">
<img src="http://www.mezzolabs.co.uk/wp-content/uploads/2013/10/heaven-700x300.jpg"/>
<div class="info">
<span>This is train</span>
<p>Price: 100$</p>
</div>
</div>

Related

How to check over which divs mouse is moving using TYPESCRIPT or JAVASCRIPT only?

I have a div1 on which I applied ondrag which is working i.e on dragging the element the handler is getting called and I am getting the target element as that particular div1.
Now while dragging the div1 over the other divs(eg: 5 divs) is it possible to determine the id’s of other div over which the div1 is dragging .
For eg I have this code :
<html>
<head>
<style>
.design {
float: left;
width: 100px;
height: 35px;
margin: 15px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<div style="width: 100px; height: 35px;border: 1px solid #aaaaaa;" ondragstart="dragStart(event)" ondrag="dragging(event)" draggable="true" id="dragtarget">Drag me!</div>
<div class="design" ></div>
<script>
/* Events fired on the drag target */
function dragStart(event) {
event.dataTransfer.setData("Text", event.target.id);
}
function dragging(event) {
document.getElementById("demo").innerHTML = "The p element is being dragged";
}
</script>
</body>
</html>
But here I have the restriction that I cannot use drag events on any div apart from the two I have applied however I can use mouseevent
Thanks

As there are no code examples, we won't be able to give you code responses that may help you. That said, you can start reading from this link to understand drop targets and collision detection.
https://javascript.info/mouse-drag-and-drop#potential-drop-targets-droppables

if you want drag and drop fuctionality and to check which div is dragged and on which it is dropped you can use jquery sortable ui plugin . Let us assume i have Ledpipeline page on which i have four pipeline stages sortable10 , sortable 11 , 12 and 13 so i used below code hope this will help you
<ul class="ui-sortable defaultscroll" id="sortable-10">
<li data-LeadID="L1">
<div class="leadpilinelist">
<p class="leadpname">John Doe</p>
<div class="selrdurationbox">
<span class="selerlead">Seller :</span>
<span class="slerleadname"></span>
</div>
<div class="selrdurationbox">
<span class="selerlead">Duration :</span>
<span class="slerleadname"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-ss-12 col-sm-3 col-xs-6 padding0">
<div class="leadpipelinebox ovrflw_hiddn">
<div class="headbox_pipeline">
<h4>Contact Made</h4>
<span id="ContactMadeCount">0</span>
<i class="mdi mdi-contacts"></i>
</div>
<ul id="sortable-11" class="ui-sortable defaultscroll">
<li data-LeadID="L2">
<div class="leadpilinelist">
<p class="leadpname">John Doe</p>
<div class="selrdurationbox">
<span class="selerlead">Seller :</span>
<span class="slerleadname"></span>
</div>
<div class="selrdurationbox">
<span class="selerlead">Duration :</span>
<span class="slerleadname"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-ss-12 col-sm-3 col-xs-6 padding0">
<div class="leadpipelinebox ovrflw_hiddn">
<div class="headbox_pipeline">
<h4>Meeting Arranged</h4>
<span id="MeetingArrage">0</span>
<i class="mdi mdi-account-multiple"></i>
</div>
<ul id="sortable-12" class="ui-sortable defaultscroll">
<li data-LeadID="L3">
<div class='leadpilinelist'>
<p class='leadpname'>John Doe</p>
<div class='selrdurationbox'>
<span class="selerlead">Seller :</span>
<span class='slerleadname'></span>
</div>
<div class='selrdurationbox'>
<span class='selerlead'>Duration :</span>
<span class='slerleadname'></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-ss-12 col-sm-3 col-xs-6 padding0">
<div class="leadpipelinebox ovrflw_hiddn">
<div class="headbox_pipeline">
<h4>Proposal Made</h4>
<span id="ProposalCounter">0</span>
<i class="mdi mdi-file"></i>
</div>
<ul id="sortable-13" class="ui-sortable defaultscroll">
<li data-LeadID="L4">
<div class="leadpilinelist">
<p class="leadpname">John Doe</p>
<div class="selrdurationbox">
<span class="selerlead">Seller :</span>
<span class="slerleadname"></span>
</div>
<div class="selrdurationbox">
<span class="selerlead">Duration :</span>
<span class="slerleadname"></span>
</div>
</div>
</li>
</ul>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript">
function ChangeStage(SenderDiv, RecieveOnStage, LeadID) {
alert ("DraggedDiv :"+SenderDiv + "RecievedonWhichDiv :" + RecieveOnStage + "AttributeID value dragged div :" +LeadID);
}
$(document).ready(function() {
$("#sortable-10").sortable({
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
connectWith: ".ui-sortable",
});
$("#sortable-11").sortable({
connectWith: ".ui-sortable",
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
});
$("#sortable-12").sortable({
connectWith: ".ui-sortable",
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
});
$("#sortable-13").sortable({
connectWith: ".ui-sortable",
start: function (event, ui) {
$("span#result").html($("span#result").html()
+ "<b>start</b><br>");
},
receive: function (event, ui) {
var RecieveFrom = ui.sender.attr("id");
var DroppedONStage = event.target.id;
var DroppedEmentID = $(ui.item).attr("data-LeadID");
ChangeStage(RecieveFrom, DroppedONStage, DroppedEmentID);
},
});
});
</script>

Clone LI div so it is placed after the original LI instead of end

I want to be able to click on an item and clone it immediately after that item, At moment it always Clones to the END, id adds it after the last LI in list.
I created a jsFiddle here jsfiddle test
JS
const curId = 20;
function cloneIt(){
var newId = Math.floor((Math.random() * 1000) + 1);
const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
newCloned.html(newCloned.html().replace(
new RegExp(curId, 'g'),
newId
));
$("#ulContainer").append(newCloned);
}
$('#ulContainer').on('click', '.tog', function(e) {
cloneIt();
alert('item cloned');
e.preventDefault();
});
HTML
<ul id='ulContainer'>
<li id="d20" class="cards__item">
<div class="card">
<div class="card__content cellb">
<a id="dup20" class="tog" href="http://test/pgdup/20">
<div class="dup20">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (20)</p>
</div>
</div>
</li>
<li id="d21" class="cards__item">
<div class="card">
<div class="card__content anchor">
<a id="dup21" class="tog" href="http://test/pgdup/21">
<div class="dup21">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (21)</p>
</div>
</div>
</li>
</ul>

You can try using .after() by passing the event to the function:
Insert content, specified by the parameter, after each element in the set of matched elements.
Change
$("#ulContainer").append(newCloned);
To
$(e.target.closest('li')).after(newCloned);
const curId = 20;
function cloneIt(e){
var newId = Math.floor((Math.random() * 1000) + 1);
const newCloned = $('#d'+curId).clone(true).prop('id', "d"+newId );
newCloned.html(newCloned.html().replace(
new RegExp(curId, 'g'),newId));
$(e.target.closest('li')).after(newCloned);
}
$('#ulContainer').on('click', '.tog', function(e) {
cloneIt(e);
alert('item cloned');
e.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id='ulContainer'>
<li id="d20" class="cards__item">
<div class="card">
<div class="card__content cellb">
<a id="dup20" class="tog" href="http://test/pgdup/20">
<div class="dup20">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (20)</p>
</div>
</div>
</li>
<li id="d21" class="cards__item">
<div class="card">
<div class="card__content anchor">
<a id="dup21" class="tog" href="http://test/pgdup/21">
<div class="dup21">clone me</div>
</a>
</div>
<div class="card__content nick">
<p class="card__text nick">Test Tres (21)</p>
</div>
</div>
</li>
</ul>

Apply CSS class on hover to other element

I've this HTML structure:
<div class="container">
<div class="list-wrapper">
<ul>
<li class="item-first">
</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first"></div>
</div>
</div>
So is it possible to set the .description-first to opacity: 1; when hovering .item-first? Or is this just possible with JS? Thanks for your help!

As Strebler said, this is only possible with Javascript.
function MouseOver(value) {
document.getElementsByClassName("description-first")[0].setAttribute("style", "opacity: " + value + ";");
}
.description-first {
opacity:0;
}
<div class="container">
<div class="list-wrapper">
<ul>
<li onmouseover="MouseOver('1');" onmouseout="MouseOver('0');" class="item-first">hover here
</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first">to make this appear</div>
</div>
</div>

Not possible. The closest you will get in css is using the .list-wrapper on hover like this:
.list-wrapper:hover + .description-wrapper > .description-first {
opacity: 1;
}
But that's not what you want I guess. :)

This is my solution. With my solution I can add a class depending on the index.
jQuery("li").hover(function () {
jQuery(".description-wrapper").children().eq(jQuery(this).index()).toggleClass("description-visible");
});
.description-wrapper div {
opacity: 0;
}
.description-visible {
opacity: 1 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="list-wrapper">
<ul>
<li class="item-first">First</li>
<li class="item-second">Second</li>
<li class="item-third">Third</li>
</ul>
</div>
<div class="description-wrapper">
<div class="description-first">First</div>
<div class="description-second">Second</div>
<div class="description-third">Third</div>
</div>
</div>

JS and HTML hide div not working

I have built a tab bar website that only uses one page I am using js to hide 3 elements and show one. When I click the links to show one and hide the others everything is messing up and 3 are shown or 2 it's random. Here is my code.
function unhide(divID, otherDivId, otherDivId, otherDivId) {
var item = document.getElementById(divID);
if (item) {
item.className = (item.className == 'hidden') ? 'unhidden' : 'hidden';
}
document.getElementById(otherDivId).className = 'hidden';
}
.hidden {
display: none;
}
.unhidden {
display: block;
}
<div id="tweaked" class="hidden">
<p>Test1</p>
<footer class="bottom">
<a class="tab current" href="javascript:unhide('home', 'tweaked', 'other', 'more')">Home<i class="material-icons">home</i></a>
<a class="tab" href="javascript:unhide('tweaked', 'home', 'other', 'more')">Tweaks<i class="material-icons">view_headline</i></a>
<a class="tab" href="javascript:unhide('other', 'home', 'tweaked', 'more')">Other<i class="material-icons">view_headline</i></a>
<a class="tab" href="javascript:unhide('more', 'tweaked', 'other', 'more')">More<i class="material-icons">share</i></a>
</footer>
</div>

Perhaps you want something like this:
var anchors = document.querySelectorAll(".bottom .tab"),
showHide = function(e) {
var parent = this.parentNode;
anchors.forEach(a => {
var relatedDiv = document.getElementById(a.dataset.tab),
aClass = a.className.trim();
if (a.dataset.tab != this.dataset.tab) {
relatedDiv.className = relatedDiv.className.replace("unhidden", "") + " hidden";
a.className = aClass.replace("current", "");
} else {
relatedDiv.className = relatedDiv.className.replace("hidden", "") + " unhidden";
a.className = aClass.replace("current", "") + " current";
}
});
};
anchors.forEach(a => a.addEventListener("click", showHide));
.hidden{
display:none;
}
.unhidden{
display:block;
}
<div id="home" class="unhidden">
<p>Home</p>
</div>
<div id="tweaked" class="hidden">
<p>Tweaks</p>
</div>
<div id="other" class="hidden">
<p>Other</p>
</div>
<div id="more" class="hidden">
<p>More</p>
</div>
<footer class="bottom">
<a class="tab current" href="#" data-tab="home">Home<i class="material-icons">home</i></a>
<a class="tab" href="#" data-tab="tweaked">Tweaks<i class="material-icons">view_headline</i></a>
<a class="tab" href="#" data-tab="other">Other<i class="material-icons">view_headline</i></a>
<a class="tab" href="#" data-tab="more">More<i class="material-icons">share</i></a>
</footer>

Have you tried item.classList ?
Element.classList | MDN
You could try something like this:
if(item.classList.contains("hidden")){
item.classList.remove("hidden");
item.classList.add("unhidden");
}else{
item.classList.add("hidden");
item.classList.remove("unhidden");
}

how to rotationally change the content of 'div' on mouseover on each 'li'

whenever, I mouseover on the 'li', then, that particular 'li' attribute need to changed to 'clsSect'. On the other hand, based on the list[li] selection, the div content has to set to 'display:block' other should changed to 'display:none'.
if the first 'li' selected, then, the first 'div' need to be selected, likewise
if the second 'li' selected, then, the second 'div' need to be selected,
This below code does not work as expected. Any help please?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<script src="js/jquery.min.js"></script>
<style>
</style>
</head>
<body>
<div class="mainBodyContent" id="Contact">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID3">
<p><span>sample3</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div class="mainBodyContent" id="About">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID2">
<p><span>sample3</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div class="mainBodyContent" id="Careers">
<div class="perimgleft">
<img class="perImg" alt="This is for sample"/>
<div id="thisID1">
<p><span>sample1</span></p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a></p>
</div></div>
</div>
<div id="selRound">
<ul class="clearfix rouncorner">
<li id="fpn1" class="myList clsSect"></li>
<li id="fpn2" class="myList"></li>
<li id="fpn3" class="myList"></li>
</ul>
</div>
<script>
var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft'] div");$hover2 = $("#About div[class='perimgleft'] div");$hover3 = $("#Careers div[class='perimgleft'] div");
$("#selRound .myList").mouseover(function(evt) {
if(evt.currentTarget.id == 'fpn1'){
$hover1.css('display', 'block');
($hover2, $hover3).css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
($hover1, $hover3).css('display', 'none');
$hover2.css('display', 'block');
}else {
($hover1, $hover2).css('display', 'none');
$hover3.css('display', 'block');
}
});
$("#selRound .myList").mouseout(function(evt) {
});
</script>
</body>
</html>

Need to clean up the code.
In HTML we set the ID for the contents we should hide/show
...
<div id="fpn1" class="perimgleft">
...
<div id="fpn2" class="perimgleft">
...
<div id="fpn3" class="perimgleft">
...
Then we use them as data attributes for list elements
<li data-show="#fpn1" class="myList">fpn1</li>
<li data-show="#fpn2" class="myList">fpn2</li>
<li data-show="#fpn3" class="myList">fpn3</li>
Then with jquery we hide all contents
$('.perimgleft').hide();
So that we'll show the right content related to the hovered element:
$('ul.clearfix.rouncorner li').mouseover(function(){
$('ul.clearfix.rouncorner li').removeClass("clsSect");
$(this).addClass("clsSect");
var contentId = $(this).data("show");
$('.perimgleft').hide();
$(contentId).show();
})
DEMO HERE

try this :
var $hover = $("div.perimgleft img");
$hover1 = $("#Contact div[class='perimgleft']>div");$hover2 = $("#About div[class='perimgleft']>div");$hover3 = $("#Careers div[class='perimgleft']>div");
$("#selRound .myList").mouseover(function(evt) {
if(evt.currentTarget.id == 'fpn1'){
$hover1.css('display', 'block');
$hover2.css('display', 'none');
$hover3.css('display', 'none');
}
else if(evt.currentTarget.id == 'fpn2'){
$hover3.css('display', 'none');
$hover1.css('display', 'none');
$hover2.css('display', 'block');
}else {
$hover2.css('display', 'none');
$hover1.css('display', 'none');
$hover3.css('display', 'block');
}
});
$("#selRound .myList").mouseout(function(evt) {
});

Are you looking something like this.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">
.mainBodyContent{
display: none;
}
</style>
</head>
<body>
<div id="selRound">
<ul class="clearfix rouncorner">
<li id="fpn1" class="myList">contact</li>
<li id="fpn2" class="myList">about</li>
<li id="fpn3" class="myList">careers</li>
</ul>
</div>
<div class="mainBodyContent" id="Contact">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID3">
<p><span>sample1</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<div class="mainBodyContent" id="About">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID2">
<p><span>sample2</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<div class="mainBodyContent" id="Careers">
<div class="perimgleft">
<img class="perImg" alt="This is for sample" />
<div id="thisID1">
<p><span>sample3</span>
</p>
<p>To explore job opputunities at 'Company', see our <a name="Career" href="#Careers"><span>Hot Jobs</span></a>
</p>
</div>
</div>
</div>
<script>
var hover1 = $("#Contact");
var hover2 = $("#About");
var hover3 = $("#Careers");
$(".myList").mouseout(function(evt) {
$('.mainBodyContent').css('display','none');
});
$(".myList").mouseover(function(evt) {
var currentId=$(this).attr('id');
if(currentId=='fpn1'){
hover1.css({'display':'block'});
}
if(currentId=='fpn2'){
hover2.css({'display':'block'});
}
if(currentId=='fpn3'){
hover3.css({'display':'block'});
}
});
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

How to rollover image with jquery? - javascript

Related

How to check over which divs mouse is moving using TYPESCRIPT or JAVASCRIPT only?

Clone LI div so it is placed after the original LI instead of end

Apply CSS class on hover to other element

JS and HTML hide div not working

how to rotationally change the content of 'div' on mouseover on each 'li'

Categories

Resources