logo标签列表

Slick.js移除图像周围的蓝色高亮显示

javascriptjquerycssslick.js
29

我正在使用Slick.js在模态框中构建一个旋转木马。一切都运行得很完美，直到我点击了一张图片。出现了蓝色边框，我不知道如何停止它。我尝试了outline: none和border: none，但都没有成功。这是我的代码：

HTML:

<div id="openModal" class="modalDialog">
    <div id ="background">
        <a href="#close" title="Close" class="close">X</a>
            <div id="logo">
                <img src="/media/{{ gallery.logo }}" alt="Smiley face" height="100" width="150">
            </div>
            <div class="multiple-items">
                        <div><img src="/media/{{ gallery.image1 }}" height="200" width="300"></div>
                        <div><img src="/media/{{ gallery.image2 }}" height="200" width="300"></div>
                        <div><img src="/media/{{ gallery.image3 }}" height="200" width="300"></div>
                        <div><img src="/media/{{ gallery.image4 }}" height="200" width="300"></div>
                        <div><img src="/media/{{ gallery.image5 }}" height="200" width="300"></div>
                        <div><img src="/media/{{ gallery.image6 }}" height="200" width="300"></div>
            </div>
        </div>
</div>

CSS：

/* Slider */
 .slick-slider {
    margin: 110px 35px 0 0;
    position: relative;
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}
.slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track, .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}
.slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before, .slick-track:after {
    display: table;
    content:'';
}
.slick-track:after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}
.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide {
    display: block;
    background-color: green;
    border: none;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}
.slider {
    width: 80%;
    margin: 40px 0 0 100px;
}
.lower {
    margin-top: 100px;
}
.slick-slide {
    color: white;
    padding: 30px;
    font-size: 30px;
    font-family:"Arial";
    margin: 0 -50px 0 0;
}
.slick-prev:before, .slick-next:before {
    color: black;
}
.slick-slide:nth-child(1), .slick-slide:nth-child(3), .slick-slide:nth-child(5), .slick-slide:nth-child(7), .slick-slide:nth-child(9), .slick-slide:nth-child(11) {
}
.slick-slide slick-current slick-active {
    display: none;
    color: red;
}
.slick-slide slick-active {
    display: none;
}
.slick-active img {
    outline: 0 !important;
    border:0 none !important;
}
.multiple-items img {
    outline: 0 !important;
    border:0 none !important;
}

JQuery：

$(document).ready(function(){
    $('.multiple-items').slick({
      infinite: false,
      arrows: false,
      slidesToShow: 3,
      slidesToScroll: 1,

});
  });

编辑：

这里是JSFiddle的链接。当你打开模态框时，你会看到里面的图片。一旦你点击一张图片，一个蓝色的框就会出现在图片周围。这就是我想要去掉的。

您的代码无法复现问题，您能否更清楚地描述一下出现问题的边界，是在图像周围吗？ - Shehary
@Shehary 我添加了一个 JSFiddle，指出了我的问题。感谢任何帮助。 - Ryan113
1
@Kevin Jantzer的解决方案是正确的，你在问题中忘记提到蓝色边框只出现在Chrome浏览器中，如果我在Firefox中检查你的fiddle，选择图像时就没有蓝色边框。 - Shehary
7个回答
61

你需要使用outline: none;

将其放在.slick-slide上。

.slick-slide {
    outline: none
}

演示

正是我所需要的。 - Greivin López
我刚刚在最后一张图片的右侧看到了一个亮点。这样就解决了。 - Alex Banman
1
没起作用，我不得不在我的幻灯片组件中（它在slick-slide内部）添加这个属性，使用react-slick: 0.26.1。 - Made in Moon
12

针对在Div上使用React Slick导致轮廓问题的解决方案是：

.slick-slide div {
  outline: none;
 }
5
我使用以下代码完成了这个操作:

.slick-slide, .slick-slide *{ outline: none !important; }

该代码用于删除轮播图中的边框。
1
每个人似乎都想摆脱轮廓线！赞扬。 - Shamseer Ahammed
5
1
如果您将一个React组件传递到Slick轮播中，例如：
<Slider {...settings}>
 <CarouselItem/>
</Slider>

我发现我必须将outline: none;样式应用于<CarouselItem/>组件，而不是针对任何本机的slick-*类。
0

你试过把这个加到你的img标签里吗?: style="border-style: none"/ 试试看，看它是否有效。

我尝试了你的建议，但它没有起作用。你可以看到我编辑时添加了一个JSFiddle链接，它可以完全展示我的问题。 - Ryan113
0

如果您正在使用Bootstrap，请注意该代码中的a:focus设置也会导致出现蓝色边框。如果您将slick-slide设置为!important或更改Bootstrap代码为a:focus:none;，这将解决问题。

看起来提供的 fiddle 中没有使用 bootstrap，因此这可能应该是一条评论而不是答案。 - Larry Turtis
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接