CODEWITHSUNDEEP
javascriptjqueryangularangular5
Sagar Kodte
Sagar Kodte

Reputation: 3815

on-mouseover not applying on first hover angular 5

I have 3 angular tabs. Used this. In second tabs I wrote below html for showing div on hover where hover effect will be apply on hovering .plus. but what is happening now the hover effect is not applying on first time and also if I hovered again the div will be show. and also how can I show roll-over of hovered element. Now all roll-over are showing. 

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

and in ts file 

   over(){

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

Upvotes: 0

Views: 270

Answers (1)

Pardeep Jain
Pardeep Jain

Reputation: 86800

You are calling mouseover event from HTML and in a method you are again checking the same so first of remove that code and also you need to remove .minus code from there as it will never call so you code will looks like -

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: Using JQuery is never recommended with Angular so try to avoid it.

Upvotes: 1

Related Questions