css：悬停时出现背景色的块/ javascript：fadein＆amp; out the background-colored block

时间：2017-06-29 08:08:44

标签： javascript css css3 hover

自从3周以来，我一直在一个页面上努力工作，现在，我打算使用javascript添加背景色的块（外部和内部）以及fadein＆amp; out效果。

首先，我首先想要创建背景边框，我希望它在我悬停在我的一张图片上时显示，但是我被困在这里。我想如果我添加类似的东西：

.saintemarie{
border: 20px solid #FFF;
left:700px;
top:500px;
overflow:hidden;
display:none;
}

它实际上弄乱了我的网页并删除了我的所有图片before

＆＃13;
＆＃13; 
function mouseOver() {

  var divs = document.getElementsByClassName('lycee');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.opacity = "0";

  }
  var divs = document.getElementsByClassName('formations');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.opacity = "0";
  }
}


function thirdOver() {

  var divs = document.getElementsByClassName('college');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.opacity = "0";
  }
  var divs = document.getElementsByClassName('formations');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.opacity = "0";
  }
}

function fifthOver() {

  var divs = document.getElementsByClassName('lycee');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.opacity = "0";
  }
  var divs = document.getElementsByClassName('college');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.opacity = "0";
  }
}

function mouseOut() {
  var divs = document.getElementsByTagName('div');
  for (var i = 0; i < divs.length; i++) {
    divs[i].style.opacity = "1";
  }
}
＆＃13; 
.college .image {
  left: 100px;
  top: 475px;
  position: absolute
}

.college:hover .imagefirst {
  opacity: 0.2;
  margin: 20px;
  border: 20px solid transparent;
  transition: border-color 2s;
}

.lycee .spanthird::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border: 20px solid red;
  opacity: 0;
  transition: opacity 2s;
}

.lycee .spanthird:hover::before {
  opacity: 1
}

.lycee .spanthird::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: rgba(0, 0, 255, 0.5);
  /* semi transparent red */
  transition: opacity 2s;
}

.lycee .spanthird:hover::after {
  opacity: 1;
}

.lycee .spanthird {
  position: relative;
}

.college .imagesecond {
  width: 550px;
  height: 900px;
  transform: translate(-110px, 500px);
  transition: transform 0.3s ease-in-out 0.1s;
  border-radius: 8px;
  overflow: hidden;
}

.college:hover>.imagesecond {
  transform: translate(-110px, -500px);
}

.lycee .image {
  left: 700px;
  top: 500px;
  position: absolute
}

.lycee .imagefourth {
  width: 537px;
  height: 600px;
  transform: translate(-160px, 500px);
  transition: transform 20s ease-in-out 0.1s;
  border-radius: 8px;
  overflow: hidden;
}

.lycee:hover>.imagefourth {
  transform: translate(-160px, -325px);
}

.formations .image {
  left: 1250px;
  top: 510px;
  position: absolute;
}

.formations .imagesixth {
  width: 550px;
  height: 900px;
  transform: translate(-100px, 400px);
  transition: transform 0.3s ease-in-out 0.1s;
  border-radius: 8px;
  overflow: hidden
}

.formations:hover>.imagesixth {
  transform: translate(-173px, -600px);
}

body {
  background: url("http://via.placeholder.com/350x150") 33em 0% fixed no-repeat;
  position: fixed;
  background-color: rgb(0, 85, 170);
}
＆＃13; 
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="csspp.css" />

  <title> sainte marie </title>

</head>

<body>
  <div class="saintemarie">
    <a href="college/collegesaintemarie.html">
      <div onmouseover="mouseOver()" onmouseout="mouseOut()" class="college">
        <span class="spanfirst"> <img class="image imagefirst" src="http://via.placeholder.com/350x150" /></span>
        <span class="spansecond"><img class="image imagesecond" src="http://via.placeholder.com/350x150"/></span>
      </div>
    </a>

    <a href="lycee/lyceesaintemarie.html">
      <div onmouseover="thirdOver()" onmouseout="mouseOut()" class="lycee">
        <span class="spanthird"><img class="image imagethird" src="http://via.placeholder.com/350x150" /></span>
        <span class="spanfourth"><img class="image imagefourth" src="http://via.placeholder.com/350x150" /></span>
      </div>
    </a>

    <a href="c&formation/c&fsaintemarie.html">
      <div onmouseover="fifthOver()" onmouseout="mouseOut()" class="formations">
        <span class="spanfifth"><img  class="image imagefifth" src="http://via.placeholder.com/350x150" /></span>
        <span class="spansixth"><img class="image imagesixth" src="http://via.placeholder.com/350x150" /></span>
      </div>
    </a>
  </div>

  <script src="scripts/javascriptpp.js"></script>
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

，对于我将要用javascript做的事情，我想创建一个具有不透明度的Fadein / Fadeout效果和我添加的背景彩色边框，以便当我将鼠标悬停在我的一张照片中时a＆＃34;有色＆＃34;阴影使你可以减少对背景的关注，但更多地关注图像。

至于我的javascript代码，我将为我的div添加一个类名或标记名，并制作看似

的内容 
 var el = document.getElementById("div1");

 function fadeIn(el) {
   el.style.opacity = 1;


   var tick = function() {
     el.style.opacity = +el.style.opacity - 0.01;


     if (+el.style.opacity > 0) {
       (window.requestAnimationFrame && requestAnimationFrame(tick)) || 
 setTimeout(tick, 16)
     }
   };

   tick();
 }

 fadeIn(el);

你可以澄清我的javascript是否有问题吗？或者我可以将它与我的其他代码行融合？因为我的问题来自背景边界，我失去了一半

我也不能使用jQuery。

2 个答案:

答案 0 :(得分：1)

淡化边框非常简单，这是一个可以应用于代码的示例。

要在悬停时不使图像反弹，已经应用了透明边框，在悬停时它会渐变为红色。

＆＃13;
＆＃13; 
img {
  margin: 20px;
  border: 20px solid transparent;
  transition: border-color 2s;
}

img:hover {
  border-color: red;
}
＆＃13; 
<img src="http://placehold.it/150" alt="">
＆＃13;
＆＃13;
＆＃13;

另一种选择是在图像周围使用伪元素和包装，就像这样，也可以使用半透明背景等。

＆＃13;
＆＃13; 
img {
  display: block;
}
span {
  position: relative;
  display: inline-block;
  margin: 20px;
}
span::before {
  content: '';
  position: absolute;
  top: -20px; left: -20px;
  right: -20px; bottom: -20px;
  border: 20px solid red;
  opacity: 0;
  transition: opacity 2s;
}
span:hover::before {
  opacity: 1;
}
span::after {
  content: '';
  position: absolute;
  top: 50%; left: 0;
  right: 0; bottom: 0;
  opacity: 0;
  background: rgba(0,0,255,0.5);       /* semi transparent red */
  transition: opacity 2s;
}
span:hover::after {
  opacity: 1;
}
＆＃13; 
<span>
  <img src="http://placehold.it/150" alt="">
</span>
＆＃13;
＆＃13;
＆＃13;

根据评论进行更新

以下是代码库的简化版本，我将position: absolute;从图片移至span，

＆＃13;
＆＃13; 
.lycee .spanthird {
  position: absolute;      /* moved from ".lycee .image" */
  left: 100px;             /* moved from ".lycee .image" */
  top: 100px;              /* moved from ".lycee .image" */
}

.lycee .image {
  display: block;          /* to avoid white space */
}

.lycee .spanthird::before {
  content: '';
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border: 20px solid red;
  opacity: 0;
  transition: opacity 2s;
}

.lycee .spanthird:hover::before {
  opacity: 1
}

.lycee .spanthird::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background: rgba(0, 0, 255, 0.5);
  /* semi transparent red */
  transition: opacity 2s;
}

.lycee .spanthird:hover::after {
  opacity: 1;
}
＆＃13; 
<a href="lycee/lyceesaintemarie.html">
      <div class="lycee">
        <span class="spanthird"><img class="image imagethird" src="http://via.placeholder.com/350x150" /></span>
      </div>
    </a>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

如果允许，可以使用CSS解决方案。

* {
  box-sizing: border-box;
}

img:hover {
  animation: setborder 1s ease forwards;
}

@keyframes setborder {
  0% {
    border: medium solid rgba(255, 0, 0, 0);
  }
  50% {
    border: medium solid rgba(255, 0, 0, .5);
  }
  100% {
    border: medium solid rgba(255, 0, 0, 1);
  }
}
<div class="saintemarie">
  <a href="college/collegesaintemarie.html">
    <div class="college">
      <img class="image imagefirst" src="http://via.placeholder.com/196x175" />
      <img class="image imagesecond" src="http://via.placeholder.com/320x440" />
    </div>
  </a>

  <a href="lycee/lyceesaintemarie.html">
    <div class="lycee">
      <img class="image imagethird" src="http://via.placeholder.com/183x140" />
      <img class="image imagefourth" src="http://via.placeholder.com/320x440" />
    </div>
  </a>

  <a href="c&formation/c&fsaintemarie.html">
    <div class="formations">
      <img class="image imagefifth" src="http://via.placeholder.com/172x153" />
      <img class="image imagesixth" src="http://via.placeholder.com/320x440" />
    </div>
  </a>
</div>

相关问题
最新问题