weird css behavior with buttons

[jtcookhome]

I have a button called heat-button. It is a group of a few elements to make up the button, a background, a highlight and some text. In my start up action, I'm trying to get set a class on the highlight element to set the opacity to 0. It just doesn't respond. As a test I set the element just to heat-button and it is hidden, same for the text. the two elements background and highlight will not respond. I have verified the names are correct in my svg and the correct reference in my yaml code for The floorplan. I have tried for hours and it just does not make sense.

 startup_action:
   - service: floorplan.class_set
     service_data:
       elements:
         - btn-active-forecast
         - btn-active-mode
         - btn-active-fan
         - heat-button-background
       class: button-off

Css

.button-on { 
   opacity:1;
   transition:opacity .2s;
}

.button-off  {
   opacity:0;
   transition:opacity .2s;
}

[OzGav]

Please properlynformat your yaml so we can see all the indenting. You will also need to show your css, just the relevant part will be fine.

[jtcookhome]

when you hit that code button, you have to add a couple more ` in order to get it to format correctly...

its fixed

I will add this...

as I was troubleshooting this, I added a "1" to the element name as a test to see if floorplan would show the error by not finding the element in the SVG, it do not throw an error??

[jtcookhome]

I don't see how to paste a screenshot so here is the code from the SVG showing my ids

<g
         id="heat-button"
         transform="translate(-9.9970055,-30.739576)"
         style="display:inline"><rect
           style="display:inline;opacity:1;mix-blend-mode:normal;fill:#00ff00;fill-opacity:1;stroke:none;stroke-width:0.353;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill;filter:url(#filter386)"
           id="heat-button-highlight"
           width="55.297497"
           height="13.653302"
           x="69.210091"
           y="86.809662"
           transform="matrix(1.0220221,0,0,1.0662135,-2.1330356,-6.5490439)"
           ry="1.8324699" /><rect
           style="display:inline;opacity:1;fill:#f9f9f9;fill-opacity:1;stroke:#bfc4cf;stroke-width:0.353;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
           id="heat-button-background"
           width="55.297497"
           height="13.653302"
           x="69.210091"
           y="86.460609"
           ry="1.4580083" /><text
           xml:space="preserve"
           style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:7.40833px;line-height:1.25;font-family:Arial;-inkscape-font-specification:'Arial, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-east-asian:normal;letter-spacing:0.396875px;display:inline;fill:#333333;stroke-width:0.264583"
           x="79.473061"
           y="95.89537"
           id="heat-button-text">

[OzGav]

Yeah we don’t need your SVG at the moment. We need to see your
edit. Sorry I see that edit now. I’ll get back to you when I get a chance

[OzGav]

Just a quick suggestion. Try this

.button-on, .button-on * { 
   opacity:1;
   transition:opacity .2s;
}

.button-off, .button-off * {
   opacity:0;
   transition:opacity .2s;
}

[jtcookhome]

thanks but no affect.

Also, I should mention that if I apply my same css to the button its self (- heat-button) as a test, it hides The entire button as expected can't wrap me head around my it doesn't work on the elements within that button.

[jtcookhome]

I think I figured out part of it. When you save the SVG, you need all elements visible because "opacity" won't affect them unless you apply " display: inline;" first.

for now tap_action on this button is to set the class, eventually it will run a script.

The tap_action will set the "heat-button-highlight" element correctly. I am trying to use the hover_action but it never seems to get called, am I using it wrong? The intent is the heat-button-highlight element is shown when the mouse hovers over the button. I commented out the "hover" part of my css so it didn't conflict with the below.

here is my yaml

    - element: heat-button
      tap_action:
        - service: floorplan.class_set
          service_data:
            elements:
              - heat-button-highlight
            class: button-on
      hover_action:
        - service: floorplan.class_set
          service_data:
            elements:
              - heat-button-highlight
            class: button-on

I tried this from the Usage page with no luck.

 - element: heat-button
      tap_action:
        - service: floorplan.class_set
          service_data:
            elements:
              - heat-button-highlight
            class: button-on
      hover_action:
        - service: floorplan.class_set
          service_data:
            elements:
              - heat-button-highlight
            class: '${element.matches(":hover") ? "button-on" : ""}'

[OzGav]

The hover functionality if fairly new and I don’t use it so will have to wait for @exetico to comment on that.

[exetico]

That should work, @jtcookhome . Please share a minimal example, if you think something are not working as expected.

Also, take a look at:
#386

[exetico]

I'm closing this one as 2 weeks has gone by without activity. Fell free to bump it.