H1标题在扩展后卡在边界后面

时间：2015-07-29 15:30:30

标签： html css

嘿，所有人都很棒，我希望在<h1> img标签前面显示标题.imageHolder。目前，它位于.imageHolder边界后面。 .imageHolder在悬停时展开，然后标题位于边框后面。

我已尝试设置z-index属性，但似乎无法正常工作。任何想法以及缩短代码等的任何选项都将受到赞赏。

//Mouseover/out function for Image Slider Div
$(function() {
  $('.imageSlider')
    .on('mouseover', function() {
      $('.imageHolder').addClass('transition');
      $(this).addClass('transition');
      $('.btnBack').stop(true, true).fadeIn(00);
      $('.btnNext').stop(true, true).fadeIn(00);
    })
    .on('mouseout', function() {
      $('.imageHolder').removeClass('transition');
      $(this).removeClass('transition');
      $('.btnNext').stop(true, true).fadeOut(00);
      $('.btnBack').stop(true, true).fadeOut(00);
    });
});
//Mouseover/out function for Next button on Image Slider
$(function() {
  $('.btnNext')
    .on('mouseover', function() {
      $('.imageHolder').addClass('transition');
      $(this).addClass('transition');
      $('.btnNext').stop(true, true).fadeIn(00);
    })
    .on('mouseout', function() {
      $('.imageHolder').removeClass('transition');
      $(this).removeClass('transition');
      $('.btnNext').stop(true, true).fadeOut(00);
    });
});
//Mouseover/out function for Back button on Image Slider
$(function() {
  $('.btnBack')
    .on('mouseover', function() {
      $('.imageHolder').addClass('transition');
      $(this).addClass('transition');
      $('.btnBack').stop(true, true).fadeIn(00);
    })
    .on('mouseout', function() {
      $('.imageHolder').removeClass('transition');
      $(this).removeClass('transition');
      $('.btnBack').stop(true, true).fadeOut(00);
    });
});
//Variables Used for holding/releasing Images
var nextDelay;
var backDelay;
valueArray = 0
Images = ["a.jpg", "b.jpg", "c.png"]

//Delay on swapping Image after click/Gets Next Image In Array

function Next() {

  nextDelay = setTimeout(getNext, 1400);
  $('.imageHolder').fadeTo(1200, 0, 'linear');

}

function getNext() {
    $('.imageHolder').fadeTo(20, 1, 'linear');
    var image = document.getElementsByClassName('imageHolder')[0];
    valueArray = valueArray + 1;
    if (valueArray > 2)
      valueArray = 0;
    image.src = Images[valueArray];
  }
  //Delay on swapping Image after click/Gets Last Image In Array

function Back() {
  backDelay = setTimeout(getLast, 700);
}

function getLast() {
  var image = document.getElementsByClassName('imageHolder')[0];
  valueArray = valueArray - 1;
  if (valueArray < 0)
    valueArray = 2;
  image.src = Images[valueArray];
}
body {
  /*Sets page background-colour*/
  width: 100%;
  /*Sets page width*/
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #404040;
}
.transition {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}
.imageSlider > .imageHolder {
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  border: 10px solid #021a40;
}
h1 {
  margin-top: -10px;
  margin-left: 5px;
  background: white;
}
.imageSlider {
  text-align: center;
  width: 120px;
  height: 100px;
  margin: 350px;
}
.btnNext {
  display: none;
  position: relative;
  left: 100px;
  bottom: 60px;
  outline: none;
  /*Stops border appearing after user click*/
}
.btnBack {
  display: none;
  position: relative;
  right: 100px;
  bottom: 60px;
  outline: none;
  /*Stops border appearing after user click*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Main Menu</title>
  <link rel="stylesheet" type="text/css" href="Index.css">
  <script src="jquery-1.11.3.min.js"></script>
  <script src="zoom.js"></script>
  <link rel="stylesheet" type="text/css" href="Courses.css">
</head>

<body>

  <div class="imageSlider">
    <h1>Title</h1>
    <img class="imageHolder" onclick="changeImage()" src="a.jpg">
    <input class="btnNext" type="image" src="btnNext.png" onclick="Next()" alt="Next Image" />
    <input class="btnBack" type="image" src="btnBack.png" onclick="Back()" alt="Last Image" />
  </div>
</body>

</html>

1 个答案:

答案 0 :(得分：0)

将h1样式更改为：

h1{
  margin-top:-10px;
  margin-left:5px;
  background:white;
  position:relative;
  z-index:2000;
}

要使z-index生效，您还需要应用position属性。将position设置为relative不会移动页面上的H1标记，但允许z-index生效。

以下是一个示例：

＆＃13;
＆＃13; 
//Mouseover/out function for Image Slider Div
$(function() {
  $('.imageSlider')
    .on('mouseover', function() {
      $('.imageHolder').addClass('transition');
      $(this).addClass('transition');
      $('.btnBack').stop(true, true).fadeIn(00);
      $('.btnNext').stop(true, true).fadeIn(00);
    })
    .on('mouseout', function() {
      $('.imageHolder').removeClass('transition');
      $(this).removeClass('transition');
      $('.btnNext').stop(true, true).fadeOut(00);
      $('.btnBack').stop(true, true).fadeOut(00);
    });
});
//Mouseover/out function for Next button on Image Slider
$(function() {
  $('.btnNext')
    .on('mouseover', function() {
      $('.imageHolder').addClass('transition');
      $(this).addClass('transition');
      $('.btnNext').stop(true, true).fadeIn(00);
    })
    .on('mouseout', function() {
      $('.imageHolder').removeClass('transition');
      $(this).removeClass('transition');
      $('.btnNext').stop(true, true).fadeOut(00);
    });
});
//Mouseover/out function for Back button on Image Slider
$(function() {
  $('.btnBack')
    .on('mouseover', function() {
      $('.imageHolder').addClass('transition');
      $(this).addClass('transition');
      $('.btnBack').stop(true, true).fadeIn(00);
    })
    .on('mouseout', function() {
      $('.imageHolder').removeClass('transition');
      $(this).removeClass('transition');
      $('.btnBack').stop(true, true).fadeOut(00);
    });
});
//Variables Used for holding/releasing Images
var nextDelay;
var backDelay;
valueArray = 0
Images = ["a.jpg", "b.jpg", "c.png"]

//Delay on swapping Image after click/Gets Next Image In Array

function Next() {

  nextDelay = setTimeout(getNext, 1400);
  $('.imageHolder').fadeTo(1200, 0, 'linear');

}

function getNext() {
    $('.imageHolder').fadeTo(20, 1, 'linear');
    var image = document.getElementsByClassName('imageHolder')[0];
    valueArray = valueArray + 1;
    if (valueArray > 2)
      valueArray = 0;
    image.src = Images[valueArray];
  }
  //Delay on swapping Image after click/Gets Last Image In Array

function Back() {
  backDelay = setTimeout(getLast, 700);
}

function getLast() {
  var image = document.getElementsByClassName('imageHolder')[0];
  valueArray = valueArray - 1;
  if (valueArray < 0)
    valueArray = 2;
  image.src = Images[valueArray];
}
＆＃13; 
body {
  /*Sets page background-colour*/
  width: 100%;
  /*Sets page width*/
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #404040;
}
.transition {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}
.imageSlider > .imageHolder {
  max-width: 100%;
  max-height: 100%;
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  -o-transition: all .2s ease-in-out;
  -ms-transition: all .2s ease-in-out;
  border: 10px solid #021a40;
}
h1 {
  margin-top: -10px;
  margin-left: 5px;
  background: white;
  position:relative;
  z-index:2000;
}
.imageSlider {
  text-align: center;
  width: 120px;
  height: 100px;
  margin: 350px;
}
.btnNext {
  display: none;
  position: relative;
  left: 100px;
  bottom: 60px;
  outline: none;
  /*Stops border appearing after user click*/
}
.btnBack {
  display: none;
  position: relative;
  right: 100px;
  bottom: 60px;
  outline: none;
  /*Stops border appearing after user click*/
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Main Menu</title>
  <link rel="stylesheet" type="text/css" href="Index.css">
  <script src="jquery-1.11.3.min.js"></script>
  <script src="zoom.js"></script>
  <link rel="stylesheet" type="text/css" href="Courses.css">
</head>

<body>

  <div class="imageSlider">
    <h1>Title</h1>
    <img class="imageHolder" onclick="changeImage()" src="a.jpg">
    <input class="btnNext" type="image" src="btnNext.png" onclick="Next()" alt="Next Image" />
    <input class="btnBack" type="image" src="btnBack.png" onclick="Back()" alt="Last Image" />
  </div>
</body>

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

相关问题
最新问题