Change opacity of a particular div, on mouse hover, and add a text label
Question
My Question is: Change opacity of a particular div, on mouse hover, and add a text label, to display which div is being hovered and changed opacity.
My Solution so far- I have changed the opacity, but for all the divs(HISTOGRAM, basically).
Problem- Want to change for a particular div, on HOVER.
HTML File
<head>
<title>Statistical Histograms</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="boxes.css">
<!-- <script src="alter.js"></script> -->
</head>
<body>
<script type="text/javascript" src="box.js"></script>
<form>
Number:<input type="text" id="number"/><br>
<input type="button" id="button1" value="Draw" onClick="draw()"/><br>
<input type="button" id="button2" value="Change Color" onClick="color()"/><br>
<div id="histContainer" style="position: relative;"> </div>
<!-- <input type="button" id="color_change" style="float: right;" value="Change Color" /> -->
</body>
JavaScript File
function draw()
{
var nums = document.getElementById("number").value.split(",");
console.log(nums);
var w = 40;
var factor = 20;
var n_max = Math.max.apply(parseInt, nums);
var h_max = factor * n_max;
console.log("h max is " + h_max);
console.log("n max is " + n_max);
//var h_max = Math.max(h);
//var a = parseInt(nums);
//var create = document.getElementById("shape");
for (var i = 0 ; i <= nums.length ; i++)
{
//var x = parseInt(nums[i]);
//var final_width = w / x;
var x_cor = (i+1) * w;
//var y_cor = i * w * 0.5;
var h = factor * nums[i];
console.log(x_cor);
console.log(h);
//console.log(h_max);
var change = document.getElementById("histContainer");
//change.className = 'myClass';
var bar = document.createElement("div");
bar.className = 'myClass';
//var c_change = document.createElement("div2");
//change.appendChild(c_change);
change.appendChild(bar);
console.log(change);
//change.style.x.value = x_cor;
//change.style.y.value = y_cor;
bar.style.position = "absolute";
bar.style.top = (h_max - h) + "px";
//bar.style.transform = "rotate(-1deg)"
bar.style.left = i*w*1 + "px";
bar.style.backgroundColor = "rgba(1,211,97,0.6)";
bar.style.opacity = "1.0";
bar.style.width = w + "px";
bar.style.height = h + "px";
//var color1 = document.getElementById("histContainer");
//var bar_color = document.createElement("div");
//color1.appendChild(change);
//bar.style.color = "rgba(1,211,97,0.6)";
}
}
$(document).ready(function() {
$("#histContainer").bind("mouseover", function() {
var shade = $("#histContainer").css("opacity");
$("#histContainer").css("opacity", "0.7");
$("#histContainer").bind("mouseout", function() {
$("#histContainer").css("opacity", shade);
});
//$("histContainer").css("opacity", "0.4");
});
});
5 answers
solution1
2 2018-01-15 11:41:16
Add a class to all divs you would like to attach the hover event to, eg
<div class="histogram" id="histogram1"></div>
<div class="histogram" id="histogram2"></div>
<div class="histogram" id="histogram3"></div>
<div class="histogram" id="histogram4"></div>
Then use jquery's hover function to capture the event:
$(document).ready(function() {
$('.histogram').hover(
function() { // handler in
$( this ).css('opacity', 0.7);
// Additional actions (display info, etc.)
}, function() { // handler out
$( this ).css('opacity', 1);
// Additional actions (hide info, etc.)
}
);
})
solution2
0 2018-01-15 11:38:16
Shouldn't you use CSS for that? Give a equal class to your divs and then just do :
.your_div : hover {
opacity: 0.8;
}
solution3
0 2018-01-15 11:42:57
Use CSS for this.
CSS:
#hover-content {
display:none;
}
#hover-me:hover #hover-content {
display:block;
}
#hover-me:hover {
opacity: 0.8;
}
HMTL:
<div class="container">
<div id="hover-me">
<span>Hover Me</span>
<div id="hover-content">
This content is visible only when you mouse hover the parent div and it has no transition.
</div>
</div>
</div>
solution4
0 2018-01-15 11:57:43
check out this snippet if you want only backgroundto be opaque try rgba()
$(document).ready(function() { $('.histogram').hover( function() { $( this ).css('opacity', '0.7'); }, function() { $( this ).css('opacity', '1'); } ); })
.histogram{ height:40px; width:40px; } .red{ background-color:red; } .blue{ background-color:blue; } .green{ background-color:green; } .yell{ background-color:yellow; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="histogram red" >1</div> <div class="histogram blue">2</div> <div class="histogram green">3</div> <div class="histogram yell" >4</div>
solution5
0 2018-01-15 12:31:05
Use this javascript instead. It works.
function draw() { var nums = document.getElementById("number").value.split(","); var w = 40; var factor = 20; var n_max = Math.max.apply(parseInt, nums); var h_max = factor * n_max; for (var i = 0 ; i <= nums.length ; i++) { var x_cor = (i+1) * w; var h = factor * nums[i]; var change = document.getElementById("histContainer"); var bar = document.createElement("div"); bar.className = 'myClass'; change.appendChild(bar); bar.style.position = "absolute"; bar.style.top = (h_max - h) + "px"; bar.style.left = i*w*1 + "px"; bar.style.backgroundColor = "rgba(1,211,97,0.6)"; bar.style.opacity = "1.0"; bar.style.width = w + "px"; bar.style.height = h + "px"; } } $(document).ready(function() { $(document).on("mouseover",".myClass", function(index,el) { $(this).text($(this).index()); var shade = $(this).css("opacity"); $(this).css("opacity", "0.7"); $(document).on("mouseout",".myClass", function() { $(this).css("opacity", shade); }); }); });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Hover text change opacity on div jquery
Hover div, display text and opacity
Change fullscreen background and add text on hover of DIV
image change on mouse hover on particular part of image
jQuery Change opacity of div to 0.2, Change text, Change opacity back to 1
Opacity on a div hover
Display text in a particular div on mouse over
Change text on parent div on hover?
Change opacity color on hover
Jquery change opacity on Hover
Related Tags