htmlcsscursorcustom-cursor

Custom-cursor is not linking back to folder

I am dealing with something, that's supposed to be fairly easy, but have somehow turned out not to be. On my page, I am using bootstrap carousel, so when the hovers "previous" or "next" for image slides, I want a custom cursor to show.

I've tried making my images smaller. I have tried uploading online. I have tried linking them directly in the .html. I have tried using JavaScript to do it. I have tried putting extra divs in the code. But still no result. I cannot detect the error myself - so I hope someone out can.

This is not supposed to be hard, but somehow it's still not working

.carousel-control-prev: {
cursor: url('Images/Arrows/Left.png'), auto;
}

.carousel-control-next: {
cursor: url('Images/Arrows/Right.png'), auto;
}
        <li class="Project" data-modal="myModal_1">

                    <span id="myBtn_1">
                        Irma Type
                    </span>

                    <span id="year">
                        2019
                    </span>

                    <div class="Describtion">
                        <p style="display:none;">
                           Typedesign
                        </p>
                    </div>

                
                    <div id="myModal_1" class="modal">
                     <div class="modal-content">

                    <div id="demo" class="carousel slide" data-ride="carousel">
                          
                          <!-- The slideshow -->
                          <div class="carousel-inner">

                            <div class="carousel-item active">    
                              <img src="Images/Lirma/type.jpg" alt="img" width="100%">
                            </div>


                          <!-- Left and right controls -->
                          <a class="carousel-control-prev" href="#demo" data-slide="prev">
                            <span class="carousel-control-prev-icon"></span>
                          </a>
                          <a class="carousel-control-next" href="#demo" data-slide="next">
                            <span class="carousel-control-next-icon"></span>
                          </a>
                          </div>

                         <p>Some text in the Modal...</p>
                   </div>
                </div>
            </div>
        </li>

Solution

  • I'm not sure if this is the answer, but i do see the usage of a colon in your css without adding a pseudo element. 

    .carousel-control-prev {
cursor: url('Images/Arrows/Left.png'), auto;
}

.carousel-control-next {
cursor: url('Images/Arrows/Right.png'), auto;
}