Markdown: change icon on hover with mouse

Configuration Frontend
1

Hi,

is there as chance to change the icon-size oh hover with mouse?

        - type: markdown
          content: >-
            [<font color="#f1c232"><ha-icon
            icon=mdi:arrow-left-bold-outline></ha-icon>](/lovelace/0)</font>
            Home

this code is not working for markdown.

          ha-state-icon:hover
           {
            --icon-symbol-size: 40px;
           }
2

Please do not consider me as rude - but where have you taken this “–icon-symbol-size” variable from? Hope you are not using chatgpt.
With another css property:
image

type: markdown
content: >-
  [<font color="#f1c232"><ha-icon
  icon=mdi:arrow-left-bold-outline></ha-icon>](/lovelace/0)</font>Home
card_mod:
  style:
    ha-markdown $: |
      ha-icon:hover {color: red;}

Added this idea to the main card-mod thread (1st post → link at the bottom → markdown):
image

3

thank you very much, works perfect!

and please forgive me with my stupid code. I tried to transfer the code from a template-card. I think chatgpt did it much more better than me :wink:

Regards,
Spartacus

4

Wrong code may harm beginners, it may spread widely))

5

nice detail!

since I had already set this:

content: >

  <!--- **Samenvatting** -->

  <p><font color = {{states('sensor.presence_color')}} >
  <ha-icon icon= {{states('sensor.presence_icon')}} ></ha-icon>
  - {{state_attr('sensor.familie_samenvatting','tekst')}}</font></p>

  <p><font color = {{is_state('sensor.schuifpuien_samenvatting','0')|iif('green','orangered')}}>
  <ha-icon icon= {{state_attr('sensor.schuifpuien_samenvatting','icon')}} ></ha-icon>
  - {{state_attr('sensor.schuifpuien_samenvatting','tekst')}}</font></p>

  <p><font color = {{is_state('sensor.deuren_samenvatting','0')|iif('green','orangered')}}>
  <ha-icon icon= {{state_attr('sensor.deuren_samenvatting','icon')}} ></ha-icon>
  - {{state_attr('sensor.deuren_samenvatting','tekst')}}</font></p>

  <p><font color = {{is_state('sensor.ramen_samenvatting','0')|iif('green','orangered')}}>
  <ha-icon icon= {{state_attr('sensor.ramen_samenvatting','icon')}} ></ha-icon>
  - {{state_attr('sensor.ramen_samenvatting','tekst')}}</font></p>
etcetc

for a markdown card, hovering the icon color worked, but lacked a bit of impact.

setting the hover to the complete line has a bit more effect:

card_mod:
  style:
    ha-markdown:
      $:
        ha-markdown-element: |
          hr {
            border: 1px groove var(--divider-color);
          }
        .: |
         :hover {color: var(--info-color);}
    .: |
      ha-card.type-markdown {
        /*background: url('/local/wallpapers/clear.jpg'); var(--lovelace-background);*/
        box-shadow: none;
        border-top: 1px groove var(--divider-color);
        overflow-y: scroll;
        max-height: {{states('input_number.max_scroll_hoogte')}}px;
      }

Dec-10-2024 13-04-06

1 Like