Possible the color when you hover over the text?

Using Streamlit
1

HI! I was writing some code using streamlit, but I can’t change the color of the lettering and when you hover over the text

       page_bg_img = f"""
        <style>
        [data-testid="stAppViewContainer"] > .main {{
         background-image: linear-gradient(to bottom, #89b40e, #00b352, #00ad99, #00a3c7, #0096e2, #3d9ddc, #559dda, #68a7d8, #4ca0e2, #3a9ae6, #3f9ae3, #5ed7df);
        background-size: 200%;
        }}

        [data-testid="stSidebar"] > div:first-child {{
        background-image: linear-gradient(to right top, #7c99cc, #00b4e2, #00c7cc, #00d882, #a4e40e);
        color: black;
        }}

        [data-testid="stHeader"] {{
        background:rgba(0,0,0,0);
        }}

        [data-testid="stToolbar"] {{
        right: 2rem;
        }}

        footer {{visibility:hidden;}}
        MainMenu {{visibility:hidden;}}
        
        .streamlit-expanderTooltip span:hover {{
            color: blue !important;}}

        </style>
        """

        st.markdown(page_bg_img, unsafe_allow_html=True)

Schermata del 2023-07-04 15-33-58

2

Hi @valeriofiorentini

To make the header text change color upon hover, could you replace the following block:

with the following:

        h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {{
            color: blue !important;
        }}

Hope this helps!

Best regards,
Chanin

3

Hi @dataprofessor !

I wanted to ask if you knew how I could also hover the st.sidebar.expander, st.write and/or checkbox elements. For example:

st.sidebar.expander("Holidays"):

Anyway, thanks a lot for the previous answer!

Thank you,
Valerio

4

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.