Panel Customized HTML how to change background color on mouse enter?

Hi

I am using Panel to generate some customized components, I would like to change the background color when mouse on the component.

import panel as pn
import param
pn.extension()
from panel.reactive import ReactiveHTML

class button(ReactiveHTML):
    index = param.Integer(default=0)
    _template = """<p id="aa" onclick="${_img_click}" style="color:black; background-color:white; font-size:10px" 
    onmouseenter="${script('show_tooltip')}" 
    onmouseleave="${script('hide_tooltip')}">
    aaaaaaaa${index}ss.
    </p>
    """
    _scripts = {
        'show_tooltip': """aa.style.color = 'red'""",
        'hide_tooltip': """aa.style.color = 'green'""",
    }
    def _img_click(self, event):
        self.index += 1
        
button()

I can change the font color through this code but can not change the background color when I replace the color with background-color, it not working.

Do we have any ideas here?

Kind regards
Victor

Cool example!

You should use backgroundColor

Great, thanks for the help. :grinning:

1 Like