我的問題是我有一個可見的 div 和另一個隱藏的 div 我想要做的是讓第二個 div 每當我將滑鼠懸停在第一個 div 上時可見所以我做了一個自定義指令來幫助我做到這一點但問題是自定義指令僅對作為屬性分配給的元素生效 這是我的 html 代碼
<div appCustomlang>Visible</div>
<div>Invisible</div>
這是我的cutsom指令代碼
import { Directive, ElementRef, HostListener } from '@angular/core';
@Directive({
selector: '[appCustomlang]',
})
export class CustomlangDirective {
@HostListener('mouseover') onm ouseOver() {
this.elm.nativeElement.style.display = 'none';
}
@HostListener('mouseout') onm ouseOut() {
this.elm.nativeElement.style.display = 'block';
}
constructor(private elm: ElementRef) {}
}
所以這段代碼只適用于可見的div，所以當我將滑鼠懸停在可見的div上時，我如何才能作業和操作不可見的div，正如我上面解釋的那樣？
uj5u.com熱心網友回復：
您在這里不需要指令 - 只是直接的 CSS。
首先將隱藏的 div 設定為 display: none .. 然后將:hover 偽選擇器添加到第一個 div 和一個直接兄弟組合器 ( ) 以便懸停在第一個 div 上 - 應用 display: 塊樣式到第二個。請注意，我添加了填充和邊框以更輕松地顯示受影響的 div。
這是假設它直接在第一個 div 之后......如果不是 - 使用通用兄弟組合器（~），你會得到相同的效果。在制作這個片段時沒有損害任何 Angular 指令:)
div {
padding: 8px;
border: solid 1px red
}
.hidden-div {
display: none;
border-color: blue;
}
.visible-div:hover .hidden-div {
display: block
}<div class="visible-div">I am visible all the time</div>
<div class="hidden-div">I am visible when you hover on my friend :)</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/524728.html
標籤：html有角度的指示