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.5k 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 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