Skip to main content
Practice

Carousel Button Styling 2

hover refers to the event that occurs when a mouse pointer is moved over an element.

In this lesson, we will learn how to apply special effects to the previous/next buttons of a carousel when they are hovered over.


hover Effect​

When hovering over the previous/next buttons
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.prev:hover and .next:hover define the style for the actions that occur when the previous (prev) button and next (next) button on a web page are hovered over.

:hover is a pseudo-class selector in CSS that defines styles to be applied only when the cursor is over the element with the specified class.

background-color sets the background color. The value used here, rgba(0, 0, 0, 0.8), means a black color (#000000) with 0.8 opacity.

With this CSS rule, when you hover over the button elements, the background color of the previous and next buttons changes to black with 0.8 transparency.

Now let's style the dot indicators that navigate to specific parts of the slide.


Indicator CSS Style​

Indicator HTML
<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>
Indicator CSS
.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;
}

The indicators are styled using the dot class. These indicators are interactive elements that navigate to the corresponding slides when clicked.

So, the cursor property is used to change the mouse cursor to a pointer when hovering over the indicator.

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

The background-color property sets the background color of the indicators to a grey #bbb, and the border-radius property makes the corners of the indicators round.

Also, the display property is used to render the indicator as an inline-block element.

Indicators are experimented with the <span> tag, hence they function as inline elements by default.

However, inline elements can't have width and height properties.

So, the display property is used to apply the height and width, making them inline-block elements.

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

This creates a smooth visual effect when the background changes color during interactions.

The style for when the indicators are active is defined using the active class.

The currently selected indicator has the active class applied to it.

To encourage interactions, the style also changes when hovered over.

Both the active state and hover state have slightly darker background colors.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.