不能将我的Div悬停在Javascript滑块内

Question

我有一个显示4个div的滑块，我想将鼠标悬停在它上面。我尝试在我的div上添加悬停，但似乎我的代码不起作用。是因为我正在为我的图片幻灯片使用滑块插件吗？从插件导入js文件是否也会影响我的html类和css文件？

顺便说一句，我使用slick.js作为我的carousel插件。下面是滑块内我的div的HTML结构。我添加了一个'<a>'标签，因为我希望我的div可以点击。

            <div class="slider-program">
                <a href="#">
                    <div class="program-slide">
                        <img src="images/bg/events-01.png">
                        <div class="program-section">                     
                          <span>크림슨창업특강</span>
                          <hr>
                          <p>크림슨창업특강은 고려대학교가 운영하
                            는 창업 프로젝트의 핵심 강의으로 교내
                            일반 예비 창업자를 적극적으로 발굴 및
                            육성하여 성공적인 창업과 사업화 과정
                            을 지원합니다.</p>
                          <button class="btn-more">MORE</button>
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="program-slide">
                        <img src="images/bg/events-02.png">
                        <div class="program-section">                     
                          <span>메이커스페이스특강</span>
                          <hr>
                          <p>메이커스페이스특강은 웨어러블, 사물
                            인터넷(IoT), 앱/웹, 콘텐츠, ICT 융합 등
                            지식서비스 분야의 (예비)창업자를 대상
                            으로 체험형 창업교육 및 사업화를 지원
                            하는 프로그램입니다. 
                             </p>
                          <button class="btn-more">MORE</button>
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="program-slide">
                        <img src="images/bg/events-03.png">
                        <div class="program-section">                     
                          <span>창업동아리</span>
                          <hr>
                          <p>창업동아리는 참신한 아이디어를 보유
                            한 동아리를 발굴 및 지원하며 우수한
                            동아리 창업준비공간 등을  제공하고 제
                            작을 지원합니다.</p>
                          <button class="btn-more">MORE</button>
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="program-slide">
                        <img src="images/bg/events-04.png">
                        <div class="program-section">                     
                          <span>2018년 고려대학교 크림슨컵 경진대회</span>
                          <hr>
                          <p>크림슨컵 경진대회는 고대동문과 재학
                            생의 성공 창업을 위하여 졸업생과 재학
                            생이 한팀을 이루어 공동의 창업 아이디
                            어를 사업화시키는 경진대회입니다.</p>
                          <button class="btn-more">MORE</button>
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="program-slide">
                        <img src="images/bg/events-05.png">
                        <div class="program-section">                     
                          <span>창업정규교과</span>
                          <hr>
                          <p>4차 산업혁명에 대비한 기업가
                            정신 함양 및 기술창업 핵심인
                            재 양성을 위한 창업 교과목 수
                            요를 증대하고 본교 학부생, 대
                            학원생을 대상으로 창업 준비
                            단계에 맞는 창업교육 및 지원
                            을 받을 수 있도록 창업교과목
                            체계 개편</p>
                          <button class="btn-more">MORE</button>
                        </div>
                    </div>
                </a>
                <a href="#">
                    <div class="program-slide">
                        <img src="images/bg/events-06.png">
                        <div class="program-section">                     
                          <span>창업비정규교과</span>
                          <hr>
                          <p>기업가정신을 바탕으로 비즈니
                            스 역량과 기술적 역량을 모두
                            갖춘 통합적 핵심 창업인재 양
                            성을 위한 다양한 강좌와 실무
                            중심의 특강 진행</p>
                          <button class="btn-more">MORE</button>
                        </div>
                    </div>
                </a>
            </div>
        </div>

我希望每个div都悬停时，会出现一个红色的边框。

Answer 1

这将在悬停时显示每个div，将出现红色边框

 $('.slider-program').on('mouseenter','.program-slide', function (e) {
    $(this).css("border", "red solid 1px");                                     
 });
 $('.slider-program').on('mouseleave','.program-slide', function (e) {
   $(this).css("border", "");
 })

Answer 2

1. 边框未完全定义（仅边框颜色）
2. 缺少开课

before:
		&:hover {
			border-color: #910023!important;
		}

now:
			&:hover {
				border: 2px solid #910023!important;
			}

before:
</head>
<div class="slider-program">

now:
</head>
<div class="program">
<div class="slider-program">

小提琴：https://jsfiddle.net/byxpqLm6/