html CSS使元素鼠标透明
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html CSS使元素鼠标透明相关的知识，希望对你有一定的参考价值。
<!-- Author: Yang Liu -->
<html>
<head>
<meta charset="utf-8">
<title>D3 Bar Chart</title>
<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
<style>
#tooltip {
position: absolute;
background-color: rgba(255, 255, 255, .8);
border: solid 1px #ccc;
padding: 5px;
visibility: hidden;
transition: all 0.5s;
}
.axis path,
.axis line {
fill: none;
stroke: #ccc;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 10px;
}
.nostroke line {
stroke: none;
}
.axis text,
.noselect {
text-decoration: none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently
not supported by any browser */
}
.axis text,
.noselect {
cursor: default;
}
.trans-fore {
pointer-events: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 10001;
}
</style>
</head>
<body>
<h1>D3.js Bar Chart Demo</h1>
<svg id="chart"></svg>
<br/><button onclick="changeData()">Change</button>
<div class="trans-fore">
<div id="tooltip"></div>
</div>
</body>
<script>
// Configs
var Chart = {
margin: {left:10, top:10, right:10, bottom:10},
width: 600,
height: 250,
sideWidth: 40,
bottomHeight: 60,
}
var BarArea = {
width: Chart.width - Chart.margin.left - Chart.margin.right - Chart.sideWidth,
height: Chart.height - Chart.margin.top - Chart.margin.bottom - Chart.bottomHeight,
}
var Bar = {
padding: .01,
outerPadding: .02,
color: 'teal',
newColor: 'darkOlivegreen',
highlightColor: 'orange'
}
var dataset1 = [
['Apple', 3],
['Strawberry', 7],
['Beer', 1.2],
['Chicken Nuggets', 8],
['Fried Fish', 7.6],
]
var dataset2 = [
['Apple', 0.7],
['Beer', 7.8],
['Strawberry', 8.9],
['Hotdog', 9.9],
['Fried Fish', 7.6],
['Beaf', 6.2],
['Sausage', 8.8],
['Bread', 6.4],
]
var dataTrigger = false;
// Setup
var data;
var svg = d3.select('#chart')
.attr({
width: Chart.width,
height: Chart.height
});
var bars;
var barGroup = svg.append('g')
.attr('id', 'bars')
.attr('transform',
`translate(${Chart.margin.left + Chart.sideWidth}, ${Chart.margin.top})`);
var xAxisGroup = svg.append('g')
.attr('transform', 'translate(' +
(Chart.margin.left + Chart.sideWidth) + ', ' +
(Chart.margin.top + BarArea.height) + ')')
.classed('axis', true)
.classed('nostroke', true);
var yAxisGroup = svg.append('g')
.attr('transform',
`translate(${Chart.margin.left + Chart.sideWidth}, ${Chart.margin.top})`)
.classed('axis', true);
var tooltip = d3.select('#tooltip');
// Rendering
data = dataset1;
renderChart();
function renderChart() {
data.sort((a, b) => {return d3.ascending(a[0], b[0])});
var xScale = d3.scale
.ordinal()
.rangeRoundBands([0, BarArea.width], Bar.padding, Bar.outerPadding)
.domain(data.map((v, i) => {return v[0]}));
var yScale = d3.scale.linear()
.range([BarArea.height, 0])
//.domain([0, d3.max(data, (d) => {return d[1]})]);
.domain([0, 10]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(yScale)
.orient('left')
.ticks(5);
bars = barGroup.selectAll('rect')
.data(data);
bars.enter()
.append('rect')
.attr('fill', Bar.newColor)
.on('mouseenter', highlight)
.on('mouseleave', unhighlight);
xAxisGroup.call(xAxis)
.selectAll('text')
.style('text-anchor', 'end')
.attr('transform', 'rotate(-20)');
yAxisGroup.call(yAxis);
bars.transition()
.duration(1500)
.delay((d, i) => {
return i * 50;
})
.ease('elastic')
.attr('fill', Bar.color)
.attr({
width: xScale.rangeBand(),
height: (d) => {return BarArea.height - yScale(d[1])},
x: (d) => {return xScale(d[0])},
y: (d) => {return yScale(d[1])},
});
bars.exit().remove();
}
function highlight(x) {
bars.attr('fill', (d) => {
return d[0] == x[0] ? Bar.highlightColor : Bar.color;
});
tooltip.style({
left: `${d3.event.clientX}px`,
top: `${d3.event.clientY}px`,
visibility: 'visible'
}).text(`${x[0]} : ${x[1]}`);
}
function unhighlight() {
bars.attr('fill', Bar.color);
tooltip.style('visibility', 'hidden');
}
function changeData() {
dataTrigger = !dataTrigger
data = dataTrigger ? dataset2 : dataset1;
renderChart();
}
</script>
</html>Food,Deliciousness
Apples,9
Green Beans,5
Egg Salad Sandwich,4
Cookies,10
Vegemite,0.2
Burrito,7
<html>
<head>
<style>
.trans-fore {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100001;
}
</style>
</head>
<body>
<div class="trans-fore">
<div id="tooltip">This tooltip windows will not capture mouse events! Great!</div>
</div>
</body>
</html>以上是关于html CSS使元素鼠标透明的主要内容，如果未能解决你的问题，请参考以下文章