Question

我有3个角度标签。使用this。在第二个标签中，我在html下面写了显示悬停时的div，其中悬停效果将应用于悬停.plus。但是现在发生了什么，悬停效果并没有在第一次应用，如果我再次徘徊，div将显示。以及如何显示悬停元素的roll-over。现在所有roll-over都在显示。

<div class="col-md-4 adv-gal">
  <div class="row">
    <img src="assets/images/On-Screen.jpg">
    <span on-mouseover='over()' class="plus">+</span>
    <p class="without-rol">ON-SCREEN</p>
    <div class="roll-over">
      <h4>Restroom/washroom branding</h4>
      <p class="minus">__</p>
      <span class="line">______________</span>
      <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,</p>
    </div>
  </div>
</div>
<div class="col-md-4 adv-gal">
  <div class="row">
    <img src="assets/images/On-Screen.jpg">
    <span on-mouseover='over()' class="plus">+</span>
    <p class="without-rol">ON-SCREEN</p>
    <div class="roll-over">
      <h4>Restroom/washroom branding</h4>
      <p class="minus">__</p>
      <span class="line">______________</span>
      <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,</p>
    </div>
  </div>
</div>
<div class="col-md-4 adv-gal">
  <div class="row">
    <img src="assets/images/On-Screen.jpg">
    <span on-mouseover='over()' class="plus">+</span>
    <p class="without-rol">ON-SCREEN</p>
    <div class="roll-over">
      <h4>Restroom/washroom branding</h4>
      <p class="minus">__</p>
      <span class="line">______________</span>
      <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,</p>
    </div>
  </div>
</div>
<div class="col-md-4 adv-gal">
  <div class="row">
    <img src="assets/images/On-Screen.jpg">
    <span on-mouseover='over()' class="plus">+</span>
    <p class="without-rol">ON-SCREEN</p>
    <div class="roll-over">
      <h4>Restroom/washroom branding</h4>
      <p class="minus">__</p>
      <span class="line">______________</span>
      <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,</p>
    </div>
  </div>
</div>
<div class="col-md-4 adv-gal">
  <div class="row">
    <img src="assets/images/On-Screen.jpg">
    <span on-mouseover='over()' class="plus">+</span>
    <p class="without-rol">ON-SCREEN</p>
    <div class="roll-over">
      <h4>Restroom/washroom branding</h4>
      <p class="minus">__</p>
      <span class="line">______________</span>
      <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,</p>
    </div>
  </div>
</div>
<div class="col-md-4 adv-gal">
  <div class="row">
    <img src="assets/images/On-Screen.jpg">
    <span on-mouseover='over()' class="plus">+</span>
    <p class="without-rol">ON-SCREEN</p>
    <div class="roll-over">
      <h4>Restroom/washroom branding</h4>
      <p class="minus">__</p>
      <span class="line">______________</span>
      <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text,</p>
    </div>
  </div>
</div>

和ts文件

   over(){

    $(".plus").mouseover(function(){
        $(".roll-over").css("display", "block");
        $(this).
    });
    $(".minus").click(function(){
        $(".roll-over").css("display", "none");
    });
}

Answer 1

您正在从HTML调用mouseover事件，并且在方法中您再次检查相同内容，因此首先删除该代码，并且还需要从那里删除.minus代码，因为它永远不会调用你的代码看起来像 -

over(){
    $(".roll-over").css("display", "block");

    // this is not right place for this you can adjust accordingly
    $(".minus").click(() => {
        $(".roll-over").css("display", "none");
    });
}

PS：Angular从不推荐使用JQuery，所以尽量避免使用它。

on-mouseover不适用于第一个悬停角度5

1 个答案: