Incorrect operation of a site function

I tried to create a website using Html, JavaScript and css, but I had an error with displaying the function, I wanted to make it so that when I open a modal window, the “Просмотрено” inscription would be shown all the time, but it is shown only when I hover over the window with the text and photography. Also, when I tried to make this function, another function broke, this is changing the theme, from white to black and from black to white, before when you press the button “Сменить тему” does work ((here is a link where you can see my code - https://jsfiddle.net/isvqq/z6j7dq4n/#&togetherjs=7dI3r9GhOS

Hello, You need to remove hover in CSS or wherever you have it, but more work to make it stay there I guess. Also you have a dark overlay is this the problem you are describing?

I’m talking about the problem that the themes won’t switch between each other and I don’t really understand about the css

You have two handlers doing the same thing. Remove the inline onclick="toggleTheme()" from the HTML and keep the handler in the JS.

Hi, I think I fixed the bug with switching the dark theme, but there is still a bug that the inscription about viewing the window is shown only when I hover the cursor over the window, what do you think is the problem here? Link to the code - https://jsfiddle.net/isvqq/z6j7dq4n/4/#&togetherjs=7dI3r9GhOS

UPD: “I modified the code to store the state of the modals in an array, where each element is an object with two fields: the modal ID and a completed: false field. When the modal is viewed, I change the completed field to true and add a watermark-like element with the text viewed.”


also, the following error appeared in the console: “Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received”. What could this be related to?

Not sure if I understand what you are trying to do, but if you add position: relative; to the .news-card selector the overlay will be positioned relative to its parent container. Which I assume is what you want.

Yes, thank you, this really helped, but there is another problem: when I went to the site on my phone, a lot of visual bugs arose! but after I cleared the browser cache they all disappeared, is it possible to make the site work correctly immediately after visiting it, even if a person visited it, so that he does not have to clear the browser cache