'How can I change the style of each link state in QML?

I'm using a TextEdit component to display text that may contain links. At the same time, it has the RichText format, which allows using HTML code as text.

As we know, links have different states, meaning they adapt when we interact with them (e.g. a:active, a:hover, a:visited etc.). My goal is to change the display of links when their state change, but the problem is that it must be done in QML, for the TextEdit.

I tried to do this by changing the styles that I made in the HTML code using the <style> tag inside the <head> tag. It is important to understand that this is a test case, since the real text can be much larger and include an unlimited number of links. The code looks like this:

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("How to style links in QML?")

    TextEdit {
        text: '
            <html>
              <head>
                <style>
                  a {
                    text-decoration: none;
                    font-size: 24px;
                  }

                  a:link {
                    color: #265301;
                  }

                  a:visited {
                    color: #437A16;
                  }

                  a:hover {
                    background: #CDFEAA;
                    text-decoration: underline;
                  }

                  a:active {
                    color: #CDFEAA;
                    background: #265301;
                    text-decoration: underline;
                  }
                </style>
              </head>
              <body>
                <p>
                  <a href="https://stackoverflow.com">stackoverflow link</a>
                </p>
              </body>
            </html>
        '
        font.pointSize: 24
        textFormat: TextEdit.RichText
        onLinkActivated: {
            Qt.openUrlExternally(link)
        }
    }
}

You can check how the code works in terms of styles here. However, only styles a and a:link affect the link, for other link states, styles do not change in any way.

So the main question is why only some styles are set, and how can I support the rest, to, for example, underline the link when hovering over it or change the color of the link after I have followed it, as it usually happens when interacting with them on a web page?

htmlcssqtqmlrichtext


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions