Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to change background color when hover?
Forum Updated to NodeBB v4.3 + New Features

How to change background color when hover?

Scheduled Pinned Locked Moved Unsolved General and Desktop
14 Posts 4 Posters 8.4k Views 2 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • L Offline
    L Offline
    lqsa
    wrote on last edited by
    #1

    I have a QWidget that has inside a QLabel, that represents an image, a separator, another QLabel and another QWidget. It represents an attach file.
    0_1533064723670_ui.PNG

    I put this styleSheet:

    :hover{background:#e5f1fb}
    

    on AttachWidget, but when the mouse is hover, it only paints de background color on partial parts:
    0_1533064957937_hover.PNG

    JonBJ 1 Reply Last reply
    0
    • L lqsa

      I have a QWidget that has inside a QLabel, that represents an image, a separator, another QLabel and another QWidget. It represents an attach file.
      0_1533064723670_ui.PNG

      I put this styleSheet:

      :hover{background:#e5f1fb}
      

      on AttachWidget, but when the mouse is hover, it only paints de background color on partial parts:
      0_1533064957937_hover.PNG

      JonBJ Offline
      JonBJ Offline
      JonB
      wrote on last edited by JonB
      #2

      @lqsa
      I can't tell from the pic: is it just the Spacer object whose background is not getting set? I can see that could be a problem, as it's layout not widget. If it's just that, I can only think: can you make, say, the QLabel have, say, a left-hand margin instead? I think the spacer shows with the background of the containing widget your whole AttachWidget in inside? (I wonder whether adding another layer of widget to yours would allow you to set the background of that/the widget?)

      1 Reply Last reply
      0
      • L Offline
        L Offline
        lqsa
        wrote on last edited by
        #3

        No. Only paints the widget where the mouse is hover. In the pic I put the mouse hover the labelName. All the other widgets doesn't change the background.

        I've deleted the horizontalSpacer and put on the AttachWidget layout a layoutSpacing, but occurs the same. The space between the image and the labelName doesn't paint the background.

        mrjjM 1 Reply Last reply
        0
        • L lqsa

          No. Only paints the widget where the mouse is hover. In the pic I put the mouse hover the labelName. All the other widgets doesn't change the background.

          I've deleted the horizontalSpacer and put on the AttachWidget layout a layoutSpacing, but occurs the same. The space between the image and the labelName doesn't paint the background.

          mrjjM Offline
          mrjjM Offline
          mrjj
          Lifetime Qt Champion
          wrote on last edited by
          #4

          @lqsa
          Hi
          Only one widget will get the hover event.
          It kinda sounds like you expect the children of the widget to also do hover effect when
          parent does.
          Anyway, If plan is just to paint the background of AttachWidget and let the others be transparent
          make sure to turn off
          alt text
          As that affect if u can see parent widget
          (on)
          alt text
          (off)
          alt text

          1 Reply Last reply
          0
          • L Offline
            L Offline
            lqsa
            wrote on last edited by
            #5

            Yes, i would like an hover effect in all the children.

            I put AttachWidget with the styleSheet = background:#e5f1fb. On the editor appears the color, when run, no.

            mrjjM 1 Reply Last reply
            0
            • L lqsa

              Yes, i would like an hover effect in all the children.

              I put AttachWidget with the styleSheet = background:#e5f1fb. On the editor appears the color, when run, no.

              mrjjM Offline
              mrjjM Offline
              mrjj
              Lifetime Qt Champion
              wrote on last edited by
              #6

              @lqsa

              well only one widget hover at a time as hover.
              so unless you make sure the other are transparent the background is
              not visible through them.

              1 Reply Last reply
              0
              • L Offline
                L Offline
                lqsa
                wrote on last edited by
                #7

                AttachWidget with the styleSheet = background:#e5f1fb
                labelName with the styleSheet = background:transparent
                imageType with the styleSheet = background:transparent
                widgetClose with the styleSheet = background:transparent

                The same, no appears the background.

                mrjjM 1 Reply Last reply
                0
                • L lqsa

                  AttachWidget with the styleSheet = background:#e5f1fb
                  labelName with the styleSheet = background:transparent
                  imageType with the styleSheet = background:transparent
                  widgetClose with the styleSheet = background:transparent

                  The same, no appears the background.

                  mrjjM Offline
                  mrjjM Offline
                  mrjj
                  Lifetime Qt Champion
                  wrote on last edited by mrjj
                  #8

                  @lqsa
                  Try to not give then any stylesheet besides AttachWidget
                  and make sure all have unchecked in autoFillbackground

                  alt text

                  1 Reply Last reply
                  0
                  • L Offline
                    L Offline
                    lqsa
                    wrote on last edited by
                    #9

                    Only AttachWiget with the styleSheet property.

                    Now appears the background color, but when I put a white color to its parent, only paints the labelName background.

                    0_1533073754716_Captura.PNG

                    mrjjM 1 Reply Last reply
                    0
                    • L lqsa

                      Only AttachWiget with the styleSheet property.

                      Now appears the background color, but when I put a white color to its parent, only paints the labelName background.

                      0_1533073754716_Captura.PNG

                      mrjjM Offline
                      mrjjM Offline
                      mrjj
                      Lifetime Qt Champion
                      wrote on last edited by mrjj
                      #10

                      @lqsa
                      But if you assign stylesheet to both parent and also
                      AttachWiget it might not do as you think.

                      How does parent style sheet look ?

                      1 Reply Last reply
                      0
                      • L Offline
                        L Offline
                        lqsa
                        wrote on last edited by
                        #11

                        I have a widget container with nothing inside, only the backgroud-color white (styleSheet = background-color:#FFFFFF).

                        By code, I create the AttachWidget and append to the container. Why AttachWidget hasn't all its area with the backgroud specified on its styleSheet property?

                        mrjjM 1 Reply Last reply
                        0
                        • L lqsa

                          I have a widget container with nothing inside, only the backgroud-color white (styleSheet = background-color:#FFFFFF).

                          By code, I create the AttachWidget and append to the container. Why AttachWidget hasn't all its area with the backgroud specified on its styleSheet property?

                          mrjjM Offline
                          mrjjM Offline
                          mrjj
                          Lifetime Qt Champion
                          wrote on last edited by
                          #12

                          @lqsa
                          Hmm it should.
                          Works for me doing

                          void MainWindow::on_pushButton_2_released()
                          {
                              auto w= new QWidget;
                              w->setStyleSheet(":hover{background:#e5f1fb}");
                              ui->horizontalLayout->addWidget(w);
                          }
                          

                          where horizontalLayout is inside widget with white background
                          alt text

                          1 Reply Last reply
                          1
                          • L Offline
                            L Offline
                            lqsa
                            wrote on last edited by
                            #13

                            Please, could you test with the AttachWidget? It has another widgets inside it.

                            This is the .ui file:

                            <?xml version="1.0" encoding="UTF-8"?>
                            <ui version="4.0">
                             <class>AttachWidget</class>
                             <widget class="QWidget" name="AttachWidget">
                              <property name="geometry">
                               <rect>
                                <x>0</x>
                                <y>0</y>
                                <width>500</width>
                                <height>38</height>
                               </rect>
                              </property>
                              <property name="maximumSize">
                               <size>
                                <width>16777215</width>
                                <height>38</height>
                               </size>
                              </property>
                              <layout class="QHBoxLayout" name="horizontalLayout_2">
                               <property name="spacing">
                                <number>0</number>
                               </property>
                               <property name="leftMargin">
                                <number>2</number>
                               </property>
                               <property name="topMargin">
                                <number>2</number>
                               </property>
                               <property name="rightMargin">
                                <number>2</number>
                               </property>
                               <property name="bottomMargin">
                                <number>2</number>
                               </property>
                               <item>
                                <widget class="QLabel" name="imageType">
                                 <property name="minimumSize">
                                  <size>
                                   <width>32</width>
                                   <height>32</height>
                                  </size>
                                 </property>
                                 <property name="maximumSize">
                                  <size>
                                   <width>32</width>
                                   <height>32</height>
                                  </size>
                                 </property>
                                 <property name="styleSheet">
                                  <string notr="true">background-color:transparent</string>
                                 </property>
                                 <property name="pixmap">
                                  <pixmap resource="../../resources.qrc">:/views/subject/description.png</pixmap>
                                 </property>
                                </widget>
                               </item>
                               <item>
                                <spacer name="horizontalSpacer">
                                 <property name="orientation">
                                  <enum>Qt::Horizontal</enum>
                                 </property>
                                 <property name="sizeType">
                                  <enum>QSizePolicy::Fixed</enum>
                                 </property>
                                 <property name="sizeHint" stdset="0">
                                  <size>
                                   <width>5</width>
                                   <height>20</height>
                                  </size>
                                 </property>
                                </spacer>
                               </item>
                               <item>
                                <layout class="QVBoxLayout" name="verticalLayoutName">
                                 <item>
                                  <widget class="QLabel" name="labelName">
                                   <property name="styleSheet">
                                    <string notr="true">background-color:transparent</string>
                                   </property>
                                   <property name="text">
                                    <string>?</string>
                                   </property>
                                   <property name="textFormat">
                                    <enum>Qt::PlainText</enum>
                                   </property>
                                  </widget>
                                 </item>
                                </layout>
                               </item>
                               <item>
                                <widget class="QWidget" name="widgetClose" native="true">
                                 <property name="minimumSize">
                                  <size>
                                   <width>20</width>
                                   <height>0</height>
                                  </size>
                                 </property>
                                 <property name="maximumSize">
                                  <size>
                                   <width>20</width>
                                   <height>16777215</height>
                                  </size>
                                 </property>
                                 <property name="styleSheet">
                                  <string notr="true">background-color:transparent</string>
                                 </property>
                                 <widget class="QPushButton" name="buttonClose">
                                  <property name="geometry">
                                   <rect>
                                    <x>8</x>
                                    <y>0</y>
                                    <width>12</width>
                                    <height>12</height>
                                   </rect>
                                  </property>
                                  <property name="minimumSize">
                                   <size>
                                    <width>12</width>
                                    <height>12</height>
                                   </size>
                                  </property>
                                  <property name="maximumSize">
                                   <size>
                                    <width>12</width>
                                    <height>12</height>
                                   </size>
                                  </property>
                                  <property name="font">
                                   <font>
                                    <pointsize>5</pointsize>
                                   </font>
                                  </property>
                                  <property name="styleSheet">
                                   <string notr="true">#buttonClose{background-color: red;color:white;border:none}#buttonClose:hover{background-color:#EF5350}</string>
                                  </property>
                                  <property name="text">
                                   <string notr="true">❌</string>
                                  </property>
                                  <property name="flat">
                                   <bool>true</bool>
                                  </property>
                                 </widget>
                                </widget>
                               </item>
                              </layout>
                             </widget>
                             <resources>
                              <include location="../../resources.qrc"/>
                             </resources>
                             <connections/>
                            </ui>
                            
                            
                            1 Reply Last reply
                            0
                            • P Offline
                              P Offline
                              puss_destroyer
                              wrote on last edited by
                              #14

                              I solved this problem with morph into QWidget, right click on verticalLayoutName and morph it. Then set Attach Widget :hover color.

                              1 Reply Last reply
                              0

                              • Login

                              • Login or register to search.
                              • First post
                                Last post
                              0
                              • Categories
                              • Recent
                              • Tags
                              • Popular
                              • Users
                              • Groups
                              • Search
                              • Get Qt Extensions
                              • Unsolved