Loving the Bulma flow. Just wanted to make my images more obvious that they can do things when clicked.
I can bind a style with vue.js such as
<figure class="image is-128x128">
<img v-bind:src="currentTrack.coverURL"
@mouseover="hover = true"
@mouseleave="hover = false"
@click="playAudio()"
:style="hover ? {opacity:0.5} : {opacity:1}" alt=""/>
</figure>
but the mouse pointer doesn't change to something that might help it seem more button like... wondering if there is an easy Bulma attribute I can add
thanks in advance!
You can simply use the CSS cursor property with the value pointer to change the cursor into a hand pointer while hover over any element and not just hyperlink. In the following example when you place the cursor over the list item, it will change into a hand pointer instead of the default text selection cursor.
Use CSS property to create cursor to hand when user hovers over the list of items. First create list of items using HTML <ul> and <li> tag and then use CSS property :hover to cursor:grab; to make cursor to hand hover the list of items.
As noted by @Relisora, the class is-clickable
now ships natively with Bulma, so no extra CSS is required.
Bulma doesn't have a built-in class for that currently, unfortunately.
You can, however, easily create a class for that! To follow Bulma conventions, let's call it is-clickable
, and define it using CSS:
.is-clickable {
cursor: pointer;
}
Now just include the class in the <figure>
-element.
You can read more about the cursor
-rule on MDN.
Use the Bulma class is-clickable
.
reference - commit
You will have to add the CSS yourself, here is the code bulma used :
.is-clickable {
cursor: pointer !important;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With