I'm new to developing! I started learning a few months ago :D
I'm trying to make it so when I hover around a div that contains a header and some text, then a border colored in a different way than the background will pop up around it, highlighting the area of that div.
I've been successful with that!
.item {
border: solid 0px;
border-spacing: 10px;
background: rgba(164, 165, 219, 0.45);
border-radius: 20px;
}
.item:hover {
background: rgba(72, 74, 196, 0.45);
}
However, I can't seem to be able to change the color of the text as well.
I can only change the color of the text when hovering directly above it.
.project-text {
color: rgb(43, 41, 41);
font-size: 50px;
}
.project-text:hover {
color: white;
}
I want to be able to change the color of the text already while hovering around the border of the div, is it possible to do so?
Rickard Elimää :
I'm assuming that .project-text is inside of .item. You can create a CSS selector to that styles the children based on hover state of the parent. See commented code below; I added a padding on .item to better show the result.\n\n\r\n\r\n.item {\r\n border: solid 0px;\r\n border-spacing: 10px;\r\n background: rgba(164, 165, 219, 0.45);\r\n border-radius: 20px;\r\n padding: 2rem /* two times the font size of the body */\r\n}\r\n\r\n.item:hover {\r\n background: rgba(72, 74, 196, 0.45);\r\n}\r\n\r\n.project-text {\r\n color: rgb(43, 41, 41);\r\n font-size: 50px;\r\n}\r\n\r\n.item:hover .project-text { /* changed selector */\r\n color: white;\r\n\r\n}\r\n<div class=\"item\">\r\n <p class=\"project-text\">\r\n Hello\r\n </p>\r\n</div>",
2020-03-22T11:17:43