Carousel Button Styling 2

hover refers to an event that occurs when you place your mouse over an element.

In this lesson, we'll learn how to give special effects when hovering over the previous/next buttons of a carousel.

Copy
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev:hover and .next:hover specify the style for actions occurring when the mouse is hovered over the previous (prev) and next (next) buttons on a webpage.

:hover is a pseudo-class selector in CSS, defining CSS that is applied only when the mouse hovers over the elements with the specified class.

background-color is a property used to define the background color. The value rgba(0, 0, 0, 0.8) represents a black background color with an opacity of 0.8.

Due to this CSS rule, when the mouse is hovered over button elements, the background color of the previous and next buttons changes to black with an opacity of 0.8.

Now, let's style the dot indicators that allow navigation to specific parts of the slide.

Copy
<div style="text-align: center">
    <span class="dot" onclick="currentSlide(1)"></span>
    <span class="dot" onclick="currentSlide(2)"></span>
    <span class="dot" onclick="currentSlide(3)"></span>
</div>

Copy
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

We've styled the indicators using the dot class. Indicators are interactive elements that navigate to the respective slide position when clicked.

Therefore, the cursor property is used to change the mouse pointer to a finger shape when hovering over the dot.

The height and width properties set the size of the dot to 15px, and the margin property sets the spacing between the dots to 2px.

The background-color property sets the dot's background color to a near-gray #bbb, and the border-radius property is used to round the corners of the dots.

Additionally, the display property is used to make the dot an inline-block element.

Since the indicator uses the <span> tag, it behaves as an inline element by default.

However, inline elements cannot use width and height properties.

Thus, to apply height and width, the display property is used to make the dot an inline-block element.

Finally, the transition property is used to make the background color of the dot change gradually.

This provides a gradual change effect for the background color each time a dot is clicked.

The style for an activated indicator is defined using the active class.

The current slide's indicator has the active class applied.

To encourage interaction, the style also changes when the mouse is hovered over it.

In both active state and on hover, the background color darkens slightly.