我正在使用d3.js在mouseOver()和mouseOut()事件中對一個選定的元素添加和洗掉類。我想讓類成為 "isHovered"，并讓我要改變的屬性值與元素的當前值相對應。就像這樣：
function handleMouseOver（d, i）{
d3.selectAll(' .classToSelect')
.classed('isHovered', 'true') 。
};
function handleMouseOut（d, i） {
d3.selectAll(' .classToSelect')
.classed('isHovered', 'false') 。
};
并使isHovered類改變元素的大小/顏色：
.isHovered {
height:高度*1.5。
width:width*1.5;
background-color:黃色。
這增加了類，但實際上并沒有對元素屬性做任何改變，除了它的classList。
那么，我是否可以讓這些新添加的類的更改真正生效，并且效果可以相對于元素的屬性的當前值？
替代方案：
是否可以直接訪問元素的width:svgAnimatedWidth和Height:svgAnimatedHeight屬性&值，以便我可以改變它們并手動將其還原？怎么做？
有多種方法可以改變懸停時的高度/寬度。
這個片段使用 CSS 變數來設定類中的初始高度和寬度，然后使用它們來計算 isHovered 類中的新值。
。const div = document. querySelector('div') 。
div.addEventListener('mouseover', function() {
div.classList.add（'isHovered'）。
});
div.addEventListener('mouseout'/span>, function() {
div.classList.remove（'isHovered'）。
});div {
--h: 100;
--w: 200;
height: calc(var(-h) * 1px);
width: calc(var(-w) * 1px) 。
background-color: blue;
}
.isHovered {
-懸停的。calc(var(-h) * 1.5) 。
--whoovered: calc(var(--w) * 1.5) 。
height: calc(var(-hovered) * 1px) 。
width: calc(var(-whovered) * 1px);
background-color: 黃色。
}< div></div> 也可以使用JS style.setProperty來改變CSS變數，并使用style.getPropertyValue來讀取它們。
作為一個完整的替代方案，如果目的只是在懸停時增加一個元素的高度和寬度，那么可以使用 CSS 變換比例。
。div {
height: 100px;
width: 200px;
background-color: blue;
}
div：hover {
transform: scale（1.5）。
background-color: 黃色。
}< div></div> 這樣做的好處（或壞處，取決于實際需要的效果）是不影響周圍元素的定位。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/306600.html
標籤：
下一篇：<p>我用laravel和js做了一個工資系統。 我可以像這樣獲取工資表。<ahref="https://i.stack.imgur.com/XjOaM.png"