Change image brightness while on hover

Question

How can I edit a code for two main_menu buttons to lower their brightness while mouse cursor is on them? I have already imported images starton and stopon, in which the brightness is lower, however, I would like to just modify already drawn start and stop buttons, as I would not need to edit get_pressed functions.

The code:

import pygame
from pygame.locals import *
from pygame import mixer

#UNITS
pygame.init()
win = pygame.display.set_mode((1920, 1080))
pygame.display.set_caption("MineScape - Early Developement")
cursor = pygame.image.load("Cursor.png")

title = pygame.image.load("Title.png").convert_alpha()
start = pygame.image.load("Start.png").convert_alpha()
starton = pygame.image.load("Start1.png").convert_alpha()
stop = pygame.image.load("Stop.png").convert_alpha()
stopon = pygame.image.load("Stop1.png").convert_alpha()
one = pygame.image.load("BG1.png").convert_alpha()
esc = pygame.image.load("ESC.png")
esc = pygame.transform.scale(esc, (500, 300))
font = pygame.font.Font("upheavtt.ttf", 32)

#CLICK
class Button():
    def __init__(self, x, y, image):
        self.image = image
        self.rect = self.image.get_rect()
        self.rect.topleft = (x, y)
        self.clicked = False
        pygame.mouse.set_visible(False)

    def draw(self):
        action = False
        pos = pygame.mouse.get_pos()
        print(pos)

        if self.rect.collidepoint(pos):
            if pygame.mouse.get_pressed()[0] == 1 and self.clicked == False:
                self.clicked = True
                action = True

        if pygame.mouse.get_pressed()[0] == 0:
            self.clicked = False
        
        win.blit(self.image, (self.rect.x, self.rect.y))
        if main_menu == True:
            win.blit(cursor, pos)

        return action

#BUTTONS
title = Button(310, 75, title)
start_button = Button(810, 550, start)
start_on = Button(810, 550, starton)
stop_button = Button(810, 720, stop)
stop_on = Button(810, 720, stopon)
esc_to_exit = Button (710, 900, esc)
one = Button (0, 0, one)

#EQUATIONS
x = 50
y = 50
width = 50
height = 50
vel = 5
main_menu = True

#MUSIC
mixer.init()
mixer.music.load("BGMusic.mp3")
mixer.music.play(100)
mixer.music.set_volume(0.15)

#GAME
run = True
while run:

    win.fill((60, 60, 60))
    title.draw()
    if main_menu == True:
        if start_button.draw():
            main_menu = False
        #elif start_button.draw() == False:
            #start_on.draw()
        if stop_button.draw():
            run = False
    else:
        win.fill((60, 60, 60))
        one.draw()
        pygame.draw.rect(win, (0, 0, 0), (x, 520, width, height))
        esc_to_exit.draw()
        
        keys = pygame.key.get_pressed()
        if keys[pygame.K_a] and x > vel:
            x -= vel
        if keys[pygame.K_d] and x < 1920 - width - vel:
              x += vel
        if keys[pygame.K_w] and y > vel:
            y -= vel
        if keys[pygame.K_s] and y < 1080 - height - vel:
            y += vel
        if keys[pygame.K_ESCAPE]:
            run = False

    pygame.time.delay(100)

    for event in pygame.event.get():
            if event.type == pygame.QUIT:
                run = False
#RANDOM
    #win = pygame.image.load("Untitled.png")
    #pygame.draw.rect(win, (0, 0, 0), (x, y, width, height))

#OTHER
    pygame.display.update()

pygame.quit()

Answer 1

Here's a class which allows to change the image upon hovering. As arguments, you need to pass in the image when the button is not being hovered and then the image when the button is being hovered instead of just one image.

class Button():
    def __init__(self, x, y, nohoverimage,hoverimage):
        self.nohoverimage = nohoverimage
        self.hoverimage = hoverimage
        self.rect = self.nohoverimage.get_rect()
        self.rect.topleft = (x, y)
        self.clicked = False
        pygame.mouse.set_visible(False)

    def draw(self):
        action = False
        pos = pygame.mouse.get_pos()


        if self.rect.collidepoint(pos):
            if pygame.mouse.get_pressed()[0] == 1 and self.clicked == False:
                self.clicked = True
                action = True
            img=self.hoverimage
        else:
            img=self.nohoverimage

        if pygame.mouse.get_pressed()[0] == 0:
            self.clicked = False
        
        win.blit(img, (self.rect))
        if main_menu == True:
            win.blit(cursor, pos)

        

        return action