Question

我的问题是：在鼠标悬停时更改特定div的不透明度，并添加文本标签，以显示正在悬停的div和更改的不透明度。

我的解决方案到目前为止 - 我已经改变了不透明度，但对于所有div（基本上是HISTOGRAM）。

问题 - 想在HOVER上改变特定的div。

HTML文件

<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文件

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");


});

});

Answer 1

为要将悬停事件附加到的所有div添加一个类，例如

<div class="histogram" id="histogram1"></div>
<div class="histogram" id="histogram2"></div>
<div class="histogram" id="histogram3"></div>
<div class="histogram" id="histogram4"></div>

然后使用jquery的悬停功能捕获事件：

$(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.)
      }
  );
})

Answer 2

你不应该使用CSS吗？给你的div一个平等的等级，然后做：

.your_div : hover {
    opacity: 0.8;
 }

Answer 3

使用CSS。
CSS：

<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>

HMTL：

Answer 4

如果您只希望背景不透明，请查看此代码段{try Model.Locality

＆＃13;

SelectListItem.Selected

＆＃13;

rgba()

＆＃13;

$(document).ready(function() {
  $('.histogram').hover(
      function() { 
        $( this ).css('opacity', '0.7');
      }, function() {
        $( this ).css('opacity', '1');
      }
  );
})

＆＃13;

Answer 5

使用此javascript代替。它有效。

＆＃13;

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);


		 });

	}); 
});

＆＃13;

在鼠标悬停时更改特定div的不透明度，并添加文本标签

5 个答案: