PyQt5 change boarder thickness around QPushbutton when Button is selected with keys

[Judith Fischer]

I made a Gui and on a normal screen switching with keys between buttons works and the selected button can be easily seen. This gui is designed for an underwater screen which is much smaller than a normal screen. On the underwater screen it becomes very hard to see on which button the "cursor" is. How is this state of the button called when the button is not yet checked but the cursor is resting on it? The button is a regular QPushButton. How can I make the line of this bounding box thicker? ![In the image the "Exit" button is selected with the tab key which is indicated by the blue rectangle around the button]WhatsApp Image 2020-06-04 at 17.26.41.jpeg
How can I make this blue box thicker?

[MEMekaniske]

Hey, you can use a hover event :)
https://doc.qt.io/qt-5/qhoverevent.html#QHoverEvent

For changing styles it would probably be as easy to use stylesheets to do it.
There is a lot of examples on google on how to use the QPushButton together with a stylesheet that detects hover, press etc and changes style to the element.

If you want to change other parts of gui, like having a status bar where it says "Click to enter sub-mode" while hovering the button, the hover event is better to use.

[Judith Fischer]

Thanks, I did use the hover event in a stylesheet but it only works once i hover over the button with a mouse but not once it is selected with a key.
I use something like the following code:

    def activeButton(self, button):
        QSS = """
        QPushButton:unchecked:focused {
        border: 1px solid;
        }
        """
        button.setStyleSheet(QSS)

    self.stack_btn = QPushButton("Stack")
    self.stack_btn.setCheckable(True)
    self.stack_btn.setFixedSize(btn_width, btn_hight)
    self.activeButton(self.stack_btn)
    self.stack_btn.clicked.connect(self.stack_btn_clicked)

What happens with the code now is that the border of the button is always set to the defined setting, but once I focus on the button with the key the whole button turns 'light blue', which is good, but how can I change the light blue into a stronger color?
[In the image the key is on the "Exit" Button and the button is 'light blue' (hard to see in the image)]()

[MEMekaniske]

Ok I understand,

@Judith-Fischer said in PyQt5 change boarder thickness around QPushbutton when Button is selected with keys:

QSS = """
QPushButton:unchecked:focused {
border: 1px solid;
}
"""

what if you try it like this

     QPushButton:hover {
        border: 1px solid;
        }
         QPushButton:focus:hover {
        border: 1px solid;
        }

regarding the coloring you should be able to set the color using css to, using the item:active {} state

[Judith Fischer]

ok, with your suggestion I am back to the thin blue box around the button.
But once I use:

    def activeButton(self, button):
        QSS = """
        QPushButton:active {
        border: 1px solid;
        }
        """
        button.setStyleSheet(QSS)

The width of the bounding box is set to 1px and the button turns light blue. However after proceeding to the next button the width of the bounding box stays 1px thick.
How can I now get rid of the thick bounding box?

[MEMekaniske]

@Judith-Fischer

There is also a not operator for css, If Qt supports it, you could do

       QSS = """
       QPushButton:active {
       border: 1px solid;
       }
        QPushButton:not:active {
       border: 0px solid;
       }
       """

[MEMekaniske]

Sorry, it would be, QPushButton:not(:active){}

[MEMekaniske]

@Judith-Fischer

I had no problem using inputs and this stylesheet to capture the hover event, and the selected/tab events adding effects and removing the effect on the release of focus.

input:not(:focus) {
  border:4px DarkRed inset;
}
input:hover{
  border:4px MidnightBlue inset;
}
input:focus {
  border:4px MidnightBlue inset;
}