Appearance of border not reported

Asked

Viewed 66 times

1

var images = $("[data-img]");
images.mouseenter(function() {
  $(this.dataset.img).css('box-shadow', "inset 0 0 20px black"); 
});
images.mouseout(function(){
  $(this.dataset.img).css('box-shadow', "");
});
h3 {
  margin-top: -21%;
  margin-left: 17%;
  font-weight: bold;
  color: #000000;
  font-size:1.5vw; 
  font-family: Chaparral Pro;
  float: left;
}

.img1 {
  background-image: url(t1.png) ;
  width: 15%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.img2 {
  background-image: url(t2.jpg) ;
  width: 15%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.img3 {
  background-image: url(t3.jpg) ;
  width: 15%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box first">
  <div >
    <img class="img1" data-img=".img1" >
  </div>
  <a href="t1.html"><h3 class="h1" data-img=".img1"> Aliens </h3></a>
  <div>
    <p></p>
  </div>
</div>
<div class="box second">
  <div>
    <img class="img2" data-img=".img2" >
  </div>
  <a href="a2.html"><h3 class="h2" data-img=".img2"> Day of the Dead </h3></a>
  <p></p>
</div>
<div class="box third">
  <div>
    <img class="img3" data-img=".img3" >
  </div>
  <a href="a3.html"><h3 class="h3" data-img=".img3"> Evil dead </h3></a>
  <p></p>
</div>

Everything is going well, but the images show a white border around it. I don’t know why she’s showing up because she’s nowhere declared to be and I don’t intend for her to show up.

  • Have you tried to check whether in different browsers the border remains? It seems to me that there is also a </Did> tag on the seventh line... Also try to force border:None on the images

  • opened in microsoft edge and the border no longer appears, so it is a Chrome problem?

  • 1

    Why are you using the tag <img> if not to use an image? You can put a background in another element and get rid of the problem. Removing the img and putting the background in div you won’t have that problem.

  • thx, problem solved.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.