How to shade a box when mouse hovers in pygame?

Question

I am making a game, with pygame, and i want it to be that when the mouse hovers over my text, the box gets shaded.

here is what I have so far:

in the event-handling loop: (tuples in CheckToUnshadeBoxes are pairs of text-surfaces and their boxes (from get_rect method))

elif event.type == MOUSEMOTION:
    CheckToShadeBoxes(event, LERect, LoadRect, PlayRect)
    CheckToUnshadeBoxes(event, (LERect, LESurf),
                        (LoadRect, LoadSurf), (PlayRect, PlaySurf))

here is CheckToShadeBoxes :

def CheckToShadeBoxes(event, *args):
    '''
    shade the box the mouse is over
    '''

    for rect in args:
        s = pg.Surface((rect.width, rect.height))
        s.set_alpha(50)
        print(rect.x, rect.y)
        s.fill(COLOURS['gray'])
        x, y = event.pos
        if rect.collidepoint(x, y):
            SURFACE.blit(s, (rect.x, rect.y))

and CheckToUnshadeBoxes :

def CheckToUnshadeBoxes(event, *args):
    ''' if the mouse moves out of the box, the box will become unshaded.'''
    for (rect, TextSurf) in args:

        x, y = event.pos
        if not rect.collidepoint(x, y):
            SURFACE.blit(TextSurf, (rect.x, rect.y))

This works fine! except that when I move the mouse inside of the box, the box will continue to get darker and darker until you cant even see the text! I know it is a small detail, but it has been bugging me for a long time and I don't know how to fix it.

by the way, if it is not evident enough, COLOURS is a dictionary with string keys and RGB tuple values, and SURFACE is my main drawing surface.

If you have any questions about my code, or anything I have done just comment!

Answer 1

If the rects you are passing are your own derived class, then I recommend making a .is_shaded class variable and checking to make sure the variable is false before shading it.

If these rects aren't your own class extending another, then I recommend you make one, as it would make it much simpler

Answer 2

The problem with your code is that you keep adding in dark rectangles when the mouse is hovered over. No wonder it gets darker and darker.

All that is needed is for your code to be shuffled around a little.

Inside your event handling, you should call a function to check if it should shade the text. This should return a Boolean value. Store this in a variable. Most of the code from the CheckToShadeBoxes function will do the trick.

In your render section, you should render just one surface on top of your text, based on whether the Boolean value is true or not. The code that creates a gray surface in the CheckToShadeBoxes function will work but make sure it is only one surface. Don't create a new surface in every iteration. Define it outside once and blit it to the screen inside the loop.

This should fix your problem!

I hope this answer helps you! If you have any further questions please feel free to post a comment below!