Ensure that both the previous and next carousel icons appear in the same color when either hovered over or visited

When I hover or click on one of the carousel items, they change to a darker color than their original appearance. I want them to maintain the same color in both states, but I'm struggling to make this adjustment. I've experimented with changing the color and background properties, but nothing seems to work.

Any assistance for this beginner would be greatly appreciated!

.container {
  padding: 15rem;
}

.wrapper {
  background-color: pink;
  width: 20rem;
  margin: 0 auto;
}


.carousel-inner {
  min-height: 150px;
}

.carousel-item {
  margin-block-start: 3.5rem;
}

p {
  text-align: center;
  margin: 0 2rem;
}

.carousel-indicators {
    display: none !important;
}

.carousel-icon {
    height: 20%;
    width: 20%;
    margin-bottom: 1rem;
    filter: invert(50%);
}

.carousel-icon:link,
.carousel-icon:visited,
.carousel-icon:hover,
.carousel-icon:active, {
  /* color: red; */
  /* background-color: red; */
  background: red;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Carousel</title>

    <link rel="stylesheet" type="text/css" href="style-carousel.css">
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
  </head>

  <body>
    <!-- jQuery Library -->
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous">
    </script>

    <!-- Popper -->
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous">
    </script>

    <!-- Compiled and Minified Bootstrap JavaScript -->
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous">
    </script>


<div class="container">
  <div class="wrapper">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="myCarousel" data-slide-to="1"></li>
        <li data-target="myCarousel" data-slide-to="2"></li>
        <li data-target="myCarousel" data-slide-to="3"></li>
        <li data-target="myCarousel" data-slide-to="4"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <p>"Lorem ipsum dolor sit amet."</p>
        </div>
        <div class="carousel-item">
          <p>"In ornare quam viverra orci sagittis eu volutpat odio facilisis."</p>
        </div>
        <div class="carousel-item">
          <p>"Ullamcorper dignissim cras tincidunt lobortis."</p>
        </div>
        <div class="carousel-item">
          <p>"Sed velit dignissim sodales."</p>
        </div>
      </div>
      <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
        <span class="carousel-control-prev-icon carousel-icon"></span>
      </a>
      <a class="carousel-control-next" href="#myCarousel" data-slide="next">
        <span class="carousel-control-next-icon carousel-icon"></span>
      </a>
    </div>
  </div>
</div>


  </body>
</html>
htmlcssbootstrap-4hovercarousel

Answer №1

If you're dealing with an SVG as the background-image, I suggest using stroke="currentcolor". However, if necessary, you can workaround it by utilizing drop-shadow() and translate(). Add the following code:

.carousel-control-next, .carousel-control-prev {
    overflow: hidden;
    opacity: .99!important;
}
.carousel-control-prev-icon{
    filter: drop-shadow(32px 0px 0px red);
    transform: translate(-32px, 0px);
}
.carousel-control-next-icon{
    filter: drop-shadow(-32px 0px 0px red);
    transform: translate(32px, 0px);
}

If your concern is solely the opacity, then include this snippet only:

.carousel-control-next, .carousel-control-prev { 
    opacity: .99!important;
}

Here is a demonstration:

.container {
  padding: 15rem;
}

.wrapper {
  background-color: pink;
  width: 20rem;
  margin: 0 auto;
}


.carousel-inner {
  min-height: 150px;
}

.carousel-item {
  margin-block-start: 3.5rem;
}

p {
  text-align: center;
  margin: 0 2rem;
}

.carousel-indicators {
    display: none !important;
}

.carousel-icon {
    height: 20%;
    width: 20%;
    margin-bottom: 1rem; 
}

.carousel-icon:link,
.carousel-icon:visited,
.carousel-icon:hover,
.carousel-icon:active, {
  /* color: red; */
  /* background-color: red; */
  background: red;
}

.carousel-control-next, .carousel-control-prev {
    overflow: hidden;
    opacity: .99!important;
}
.carousel-control-prev-icon{
    filter: drop-shadow(32px 0px 0px red);
    transform: translate(-32px, 0px);
}
.carousel-control-next-icon{
    filter: drop-shadow(-32px 0px 0px red);
    transform: translate(32px, 0px);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Carousel</title>

    <link rel="stylesheet" type="text/css" href="style-carousel.css">
    <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
  </head>

  <body>
    <!-- jQuery Library -->
    <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous">
    </script>

    <!-- Popper -->
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous">
    </script>

    <!-- Compiled and Minified Bootstrap JavaScript -->
    <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous">
    </script>


<div class="container">
  <div class="wrapper">
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="myCarousel" data-slide-to="1"></li>
        <li data-target="myCarousel" data-slide-to="2"></li>
        <li data-target="myCarousel" data-slide-to="3"></li>
        <li data-target="myCarousel" data-slide-to="4"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <p>"Lorem ipsum dolor sit amet."</p>
        </div>
        <div class="carousel-item">
          <p>"In ornare quam viverra orci sagittis eu volutpat odio facilisis."</p>
        </div>
        <div class="carousel-item">
          <p>"Ullamcorper dignissim cras tincidunt lobortis."</p>
        </div>
        <div class="carousel-item">
          <p>"Sed velit dignissim sodales."</p>
        </div>
      </div>
      <a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
        <span class="carousel-control-prev-icon carousel-icon"></span>
      </a>
      <a class="carousel-control-next" href="#myCarousel" data-slide="next">
        <span class="carousel-control-next-icon carousel-icon"></span>
      </a>
    </div>
  </div>
</div>

  </body>
</html>

Answer №2

To achieve the desired effect, adjust the opacity attribute of the carousel-control-prev and carousel-control-next classes based on different states such as link, visited, active, and hover. Initially, the opacity for these classes is set to 0.5 but changes to 0.9 on hover, resulting in the darkening effect you are experiencing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Changing the element to "position: absolute" prevents it from stretching to the full width

After styling my login page to perfection with the container div set to display: block and position: static, I encountered an issue when attempting to switch to display: inline-block or position: absolute. The container div stopped adhering to its maximum ...

htmlcsscss-position

Make the div in jQuery clickable to redirect to the child URL

Could someone shed some light on why this code isn't functioning as expected? I'm fairly new to javascript and jQuery. Below is the snippet in question: Javascript / jQuery: <script type="text/javascript"> $('.clickk').cl ...

javascriptjqueryhtml

Toggle camera on and off using a single button in Javascript

I'm encountering an issue with my camera functionality. I've implemented a button to open the camera (see code below), but I'm unsure how to turn off the camera when the same button is clicked. Snippet of my code: Button: <a type=" ...

javascripthtmljquerycssweb

Applying ng-class based on conditions to icons within table cells

In my table, I am using ng-repeat to bind cells with data. One cell contains edit, save, and delete icons. When an order is posted, the delete/save icons should be disabled and displayed in a different color. While I can disable the click event of the icon ...

javascriptcssangularjs

Tips for aligning elements vertically within a <td> tag

I am looking to vertically align 3 elements within my <td> tag, specifically in the center/middle. These are the elements I want to align: An image button (a tag) with a top arrow image A jQuery slider Another image button (a tag) with a bottom arr ...

htmlcss

performing iterations on html code with php

I have a code snippet inside an HTML file that I would like to loop using PHP. The goal is to repeat a paragraph on my HTML page as many times as needed. Any assistance with this would be greatly appreciated. <?php for($i=0;$i<=5;$i++){ <li ...

phphtml

I want to set a single background image for all slides in fullPage.js. How can I achieve this

I am attempting to replicate a similar effect as shown in this example: The demonstration above utilizes the fullPage.js plugin. You may have noticed how the background image remains consistent while navigating through different sections. I have searched ...

javascriptjqueryhtmlcssfullpage.js

What is the best way to align an InputAdornment IconButton with an OutlinedInput in Material-UI?

Struggling to replicate a text input from a mockup using Material-UI components. Initially tried rendering a button next to the input, but it didn't match. Moving on to InputAdornments, getting closer but can't get the button flush with the input ...

javascriptcssreactjsuser-interfacematerial-ui

Creating a C# application that simulates a list within a text editor

I am currently working on developing a text editing tool that will serve as the front end for a collection of text strings. Users will have the ability to make edits within the editor, and I want to ensure that these changes can be seamlessly applied to th ...

c#.nethtmltexteditor

How to create space between elements in CSS without using margin or padding?

Recently, I stumbled upon a fascinating website while working on my own CSS grid project: I am curious to know how it was achieved. The Portfolio elements on the website have space between them without any visible margins or paddings that I could identify ...

cssmargin

Adjust the alignment of items in the NavBar using BootStrap to ensure they

I'm having trouble centering the contents of my Nav Bar, and for some reason, everything seems to be left-aligned instead of centered. I haven't used float: left anywhere, so I'm not sure why it's not working as expected. The goal is ...

htmlcsstwitter-bootstrapnav

Calculating the Sum of Values in PHP using an HTML Form and Jquery

Looking to expand my knowledge of jQuery, I am attempting to create a straightforward page for practice. The goal is to develop a form that will send its values to PHP to be summed and return the results. These results will then be displayed dynamically on ...

phpjqueryhtmlformssum

Dynamically showcasing content in an HTML table

Having trouble with this code snippet. It's supposed to iterate through array objects and display them in an HTML table. The third row should have buttons, but nothing is showing up. Can you spot the issue? Here's the HTML code: <html> & ...

javascripthtmlhtml-table

Determine the number of lines in a textarea, taking into account both manual

I have a textarea that I need to validate for input exceeding 6 rows. My JavaScript code works perfectly by checking for scrollbar presence, indicating more than 6 lines of input. However, how can I achieve the same validation using PHP in case JavaScript ...

phphtmlformsvalidationtextarea

NoReverseMatch error encountered following inclusion of the Favorite button

I am new to the Django framework and currently following a tutorial. However, I encountered an error when trying to add an input button for favorites on my detail.html page: Error during template rendering In template C:\Users\leo8\Desktop ...

pythonhtmldjangourldjango-templates

JavaScript - A simple way to retrieve the dimensions of an image consistently

I'm currently working on a piece of Jquery code that is designed to display an image fitting within the screen's dimensions. These images are generated dynamically as needed. However, I am facing an issue where the height and width of the image a ...

javascriptjquerycss

How can I ensure that an absolutely positioned element [created with React] snaps to the edge of its parent div when the page loads

I am currently developing a unique two-thumb slider bar component using React. Each thumb in the slider snaps to the closest discrete tick so that users can easily select values along a number line visually. One challenge I'm facing is that the thumbs ...

htmlcssreactjs

I'm attempting to use Bootstrap to align my divs, but unfortunately, it doesn't seem to be working as I had hoped

I've been attempting to align divs using bootstrap, but I'm encountering issues. I prefer not to use a table for this purpose and have experimented with the table tag, but would rather achieve alignment with divs and bootstrap. My familiarity ...

cssbootstrap-5

What is the best way to keep a header row in place while scrolling?

I am looking to keep the "top" row of the header fixed or stuck during page scrolling, while excluding the middle and bottom rows. I have already created a separate class for the top row in my header code: view image description ...

javascripthtmlcsswordpressheader

CSS Code Failing to Adjust Inner Components Width in Variable Table

I'm facing an issue while trying to create an excel-style table using HTML and CSS. The problem arises when I attempt to have a varying number of columns in different rows, as the table exceeds the border limit and expands on its own. My goal is to re ...

javascripthtmlcss