Reputation: 3815
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
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