Question

我使用jquery来幻灯片放映和隐藏文本。使用css代码隐藏文本，

.mainContent>.imageInfo:nth-child(1){
  display:none;
}
.mainContent>.imageInfo:nth-child(2)
{
   display:none;
}
.mainContent>.imageInfo:nth-child(3){
   display:none;
}
.mainContent>.imageInfo:nth-child(4){
   display:none;
}

并且项目悬停应该显示该项目的左下角文本块。

 $( ".colContainer >  .mainContent:nth-child(n)" ).hover(function () {
       var $sel=$(".mainContent>.imageInfo:nth-child(" +( $(this).index() + 1)+")");


       if ( $sel.is( ":hidden" ) ) {
           $sel.slideDown( "slow" );console.log("hid");
        } else {
           $sel.hide();console.log("show");
        }
 });

但是，正如gif所示，当我悬停前2个元素时没有发生任何事情，当我悬停第三个元素时，它应该显示自己的文本;它显示了所有左下角文本块。

代码， https://jsfiddle.net/Debra321/j9kkx4no/127/

欢迎并赞赏任何评论。

*我已经确认这不是由像拼写错误这样的琐碎错误造成的。

我的观察是有两个问题：一个是$ sel.hide被错误地调用，即使该项已经被隐藏了。二是第三项选择器以某种方式显示每个文本块。当悬停时，console.log会打印消息。

Answer 1

这在CSS中最容易做，如下面的代码所述。

虽然适用于移动网站/应用;悬停不是一个很好的互动，因为你不能悬停在手机上。

它在jQuery中不起作用，因为在行var $sel = $(".mainContent>.imageInfo:nth-child(" + ($(this).index() + 1) + ")");中; nth-child选择器应位于.mainContent而不是.imageInfo。

.imageInfo将永远是.mainContnet内的第3个孩子，这就是为什么只有当你将鼠标悬停在第3个图块上时index为2且{{1}是} nth-child，即3）。

所以它可以写成index+1

＆＃13;

var $sel = $(".mainContent:nth-child(" + ($(this).index() + 1) + ")>.imageInfo");

＆＃13;

(function() {
  var dataObj =
    `{
        "widget": {
            "story": {
               "subtitle": "My",
               "maintitle": "Story",
               "desc": "A life as a daughter, sister and programer.",
               "image": "http://gdurl.com/USQR",
               "imageinfo":"Hsinchu",
               "spriteiconpos":"0 0",
               "url": "#"
           },
        "work": {
            "subtitle": "Working",
            "maintitle": "Experience",
            "desc": "Learning, Studying and Training.",
            "image": "http://gdurl.com/USQR",
            "imageinfo":"San Francisco",
            "spriteiconpos":"-80px 0",
            "url": "#"
        },
        "interests": {
            "subtitle": "Personal",
            "maintitle": "Interests",
            "desc": "Paint life with colors of interests.",
            "image": "http://gdurl.com/USQR",
            "imageinfo":"Quebec",
            "spriteiconpos":"0 -80px",
            "url": "#"
        },
        "goals": {
            "subtitle":"Future",
            "maintitle":"Goals",
            "desc": "Do not just survive.",
            "image": "http://gdurl.com/USQR",
            "imageinfo":"Quebec",
            "spriteiconpos":"-80px -80px",
            "url": "#"
        }
       }
     }`;
  var dataObj = $.parseJSON(dataObj);
  var dataArray = $.map(dataObj["widget"], function(value, index) {
    return [value];
  });
  var htmlCode = "";
  for (var i in dataArray) {
    var cssAttr = "";
    var cssSelect = "";
    //html
    htmlCode += "<div class='mainContent'>";
    htmlCode += "<div class='mainCol'>";
    htmlCode += "<h2>" + dataArray[i].subtitle + "</h2>";
    htmlCode += "<h1>" + dataArray[i].maintitle + "</h1>";
    htmlCode += "<p>" + dataArray[i].desc + "</p>";
    htmlCode += "</div>";
    htmlCode += "<i class='i-caretRight'></i>";
    htmlCode += "<div class='imageInfo'>" + dataArray[i].imageinfo + "</div>";
    htmlCode += "</div>";
    //css
    cssAttr = "background: url(http://gdurl.com/USQR) " + dataArray[i].spriteiconpos + "  no-repeat";
    cssSelect = ".colContainer >  .mainContent:nth-child(" + (parseInt(i) + 1) + "):before";
    var sheet = document.styleSheets[0];
    var rules = sheet.rules;
    document.styleSheets[0].addRule(cssSelect, cssAttr, rules.length);


  }
  $("#phoneContent .colContainer").html(htmlCode);
})();

＆＃13;

@import url('https://fonts.googleapis.com/css?family=Allura|Habibi|Asar');
html {
  box-sizing: border-box;
}

body {
  background: #fcfca4;
  background: linear-gradient(to top right, #F3E9D2, #EC9192);
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

#phoneContent {
  position: absolute;
  top: 17.7%;
  left: 50px;
  width: 253px;
  height: 455px;
  display: block;
  margin: auto;
  overflow: hidden;
}

#mainPhoneContent {
  top: 0;
  height: 90%;
  position: relative;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  background: #c7c4be url(http://gdurl.com/ist4) repeat;
}

.phoneToolBar {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10%;
  left: 0;
  background: black;
}

#phoneContent .colContainer {
  width: 100%;
  height: 110%;
  display: flex;
  top: 15%;
  flex-direction: column;
  position: absolute;
  background: white;
  -webkit-box-shadow: 4px 7px 50px 21px rgba(0, 0, 0, 0.41);
  -moz-box-shadow: 4px 7px 50px 21px rgba(0, 0, 0, 0.41);
  box-shadow: 4px 7px 50px 21px rgba(0, 0, 0, 0.41);
}

.colContainer>.mainContent {
  flex: 1;
  position: relative;
  background: #f1efe4;
  overflow: hidden;
  background: linear-gradient(to bottom, #f0f0e5, #e7e5da);
}

.mainContent>.imageInfo {
  position: absolute;
  left: 1%;
  bottom: -100%;
  width: 35%;
  height: 23%;
  text-align: center;
  font-family: Allura, serif;
  font-size: 1rem;
  color: black;
  transition: bottom linear 0.2s;
}

.mainContent:hover>.imageInfo {
  bottom: 1%;
}

.mainContent>.mainCol {
  left: 40%;
  width: 50%;
  height: 100%;
  position: absolute;
}

.mainCol>h2 {
  font-family: 'Habibi', serif;
  color: #ff7519;
  font-size: 1rem;
}

.mainCol>h1 {
  font-family: 'Habibi', serif;
  color: black;
  font-size: 1.5rem;
  margin-top: -12%;
}

.mainCol>p {
  margin-top: -10%;
  font-family: Georgia, serif;
  font-size: 0.7rem;
  font-style: italic;
  line-height: 1.45;
  color: #383838;
}

.colContainer>.mainContent:nth-child(n) {
  position: relative;
}

.colContainer>.mainContent:nth-child(n):hover {
  background: #ffffff;
  cursor: pointer;
}

.colContainer>.mainContent:nth-child(n):before {
  position: absolute;
  top: 5%;
  left: 2%;
  content: "";
  float: left;
  width: 80px;
  height: 80px;
}

.mainContent>i {
  position: absolute;
  content: "";
  right: 3%;
  top: 40%;
  width: 20px;
  height: 20px;
}

.mainContent>i:before {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #b8b7b0;
  content: "";
  transform-origin: right top;
  -ms-transform-origin: right top;
  /* IE 9 */
  -webkit-transform-origin: right top;
  /* Safari and Chrome */
  -moz-transform-origin: right top;
  /* Firefox */
  -o-transform-origin: right top;
  /* Opera */
  transform: rotate(-45deg);
}

.mainContent>i:after {
  position: absolute;
  top: 50%;
  width: 100%;
  height: 2px;
  background: #b8b7b0;
  content: "";
  transform-origin: right bottom;
  -ms-transform-origin: right bottom;
  /* IE 9 */
  -webkit-transform-origin: right bottom;
  /* Safari and Chrome */
  -moz-transform-origin: right bottom;
  /* Firefox */
  -o-transform-origin: right bottom;
  /* Opera */
  transform: rotate(45deg);
}

.st0 {
  fill: none;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
}

.st1 {
  fill: none;
  stroke: #DBDDDD;
  stroke-miterlimit: 10;
}

.st2 {
  fill: #FFFFFF;
}

.st3 {
  fill: none;
  stroke: #E5E5E5;
  stroke-miterlimit: 10;
}

.st4 {
  opacity: 0.3;
  fill: none;
  stroke: #FFFFFF;
  stroke-miterlimit: 10;
}

#myPhone {
  position: relative;
  width: 350px;
  height: 700px;
  display: block;
  margin: auto;
}

＆＃13;

隐藏jQuery的意外行为并向下滑动

1 个答案: