Hi
I guess it’s something super simple and easy to do but i can’t make it working.
I tried with Dynamic attributes > display > show but does not work (i don’t see the card or column in the action)
When hovering the card > the arrow appears.
For this demo I have used Bootstrap 5 and Bootstrap Icons’
I placed a card inside a column and a Bootstrap Icon under the card.
The card gets a class of myCard and the Bootstrap Icon a class of hide. I have also increased the size of the Bootstrap Icon by adding a class of fs-1 (font-size)
This is the full code which also shows the CSS
<!doctype html>
<html>
<head>
<script src="../dmxAppConnect/dmxAppConnect.js"></script>
<meta charset="UTF-8">
<title>Untitled Document</title>
<!-- New Wappler Page -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="../bootstrap/5/css/bootstrap.min.css" />
<link rel="stylesheet" href="../css/bootstrap-icons.css" />
<style>
.hide {
display: none;
}
.myCard:hover+.hide {
display: block;
color: red;
}
</style>
</head>
<body is="dmx-app" id="index">
<div class="container">
<div class="row">
<div class="col-4">
<div class="card myCard">
<img class="card-img-top" alt="Card image cap">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<i class="bi-arrow-right-square-fill fs-1 hide"></i>
</div>
</div>
</div>
<script src="../bootstrap/5/js/bootstrap.bundle.min.js"></script>
</body>
</html>
EDIT: Just noticed that the arrow needs to stay displayed so that it can be clicked on. In that case place the Icon inside the card.
Thanks ben, I will try later today.
Out of curiosity - for learning purpose - the only way of achieving this is by custom code or there is a way in Wappler with dynamic attributes?
The only bit of custom code is, mainly because of the selector .myCard:hover+.hide
.myCard:hover+.hide {
display: block;
color: red;
}
@George when you put the icon inside the card, it works on your side? The code works with icon outside the card, but when icon is inside the card, on hover the icon is not visible.
Well you need to change the css to target the icon inside the card:
.myCard:hover .hide {
display: block;
color: red;
}
it works, even if I don’t understand how ))
Do you have another way of doing it inside wappler “natively”? The dynamic attribute was my first thought but I guess I missed something out.
That is how css selectors work and this is one of the most popular use case for hovering a parent and changing the properties of a child element. CSS Pseudo-classes
No, the CSS designer UI does not currently support targeting a child element.
I still have a little problem.
It works but, as you can see, the box is expanding (in the example the icon appears over the box). Any idea how to fix that (ie: make the box keep its origin size and not expand, having the icon appearing on hover over the box)?
another question, if i want to apply an animation to this “event” like when hover the icon appears smoothly. What is the best way to do so in wappler?
Well .. this requires different styling options then.
Also this applies to your question about animation. Simple, most basic CSS:
Change your existing CSS rules
.hide {
opacity: 0;
transition: all ease 0.4s;
}
.myCard:hover .hide {
opacity: 1;
}
Not to mention you can just open the browser dev tools and copy the styles from the link you provided.
will do that.
Just to understand, why this is not a good use case for Dynamic Attribute with a logic like :
Hide this element A (Icon) but show when user hover this element B (card)?
There no way to achieve this without going into custom CSS?
Because hovering and changing classes has nothing to do with dynamic attributes. Dynamic attributes are the dynamic versions of the standard HTML attributes.
Not all of this can be done with the current implementation of the CSS designer. The thing we are missing is only targeting child elements.
Other than that all the rest can be done.
You can have your button background color animation in the transitions options:
