Question

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

顺便说一句，我正在使用slick.js作为我的轮播插件。以下是滑块中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

边界定义不完整（仅边框颜色）
缺少公开课

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/

无法将我的Div悬停在Javascript滑块中

2 个答案: