Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a clickable image in Bulma change the pointer on mouseOver like <button does>?

Tags:

bulma

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!

like image 734
cristian_v Avatar asked Mar 17 '19 22:03

cristian_v


People also ask

How do I change my mouse icon on hover?

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.

How do I change my mouse pointer to hand in HTML?

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.


Video Answer


2 Answers

For Bulma v0.9.1 and newer

As noted by @Relisora, the class is-clickable now ships natively with Bulma, so no extra CSS is required.


Older versions

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.

like image 53
Klooven Avatar answered Sep 17 '22 13:09

Klooven


Bulma >= 0.9.1

Use the Bulma class is-clickable.

reference - commit

Bulma < 0.9.1

You will have to add the CSS yourself, here is the code bulma used :

.is-clickable {
  cursor: pointer !important;
}
like image 26
Relisora Avatar answered Sep 21 '22 13:09

Relisora