隐藏在悬停jQuery

时间：2017-07-20 13:55:45

标签： javascript jquery html css

我正在使用javascript在悬停时显示/隐藏div中的文字。

有4个具有相同类别的div块 - .main_content

每个块都有一个链接和文本。默认情况下隐藏文本。

当光标在.main_content上时，只显示该块的文本。为什么hover函数不切换文本？

＆＃13;
＆＃13; 
$(document).ready(function() {
  function hover() {
    var IndexItem = getElementsByClassName("main_content");
    if (IndexItem.hover()) {
      index = IndexItem.index();
      IndexItem: eq(index).toggle();

    };
  };;
})
＆＃13; 
@font-face {
  font-family: "SevillaDecor";
  /* Гарнитура шрифта */
  src: url(/SevillaDecor.ttf);
  /* Путь к файлу со шрифтом */
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "SevillaDecor", Regular;
  font-variant: small-caps;
  font-weight: 600;
  /* font-style: oblique; */
}

a {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  text-decoration: none;
  color: #0af5ec;
}

.wrapper {
  position: absolute;
  /* top: 0px; */
  /* left: 0px; */
  /* clear: both; */
  width: 100%;
  height: 100%;
  /* overflow: hidden; */
}

.text {
  /* display: block; */
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

.main_content {
  font-size: 30pt;
  /* position: relative; */
  float: left;
  width: 50%;
  height: 50%;
  /* margin: 0; */
  /* padding: 0; */
  overflow: hidden;
  /* background-size: cover; */
  /* text-align: center !important; */
}

.main_content img {
  /* position:absolute; */
  /* min-width: 50%; */
  /* max-width: 100%; */
  /* background-size: cover; */
  width: 100%;
  height: 100%;
}

.block_center {
  /* display:none; */
  position: absolute;
  width: 185pt;
  height: 185pt;
  /* font-size: 15pt; */
  top: 50%;
  left: 50%;
  margin: -95pt;
  overflow: hidden;
  /* background-size: contain; */
  /* text-align: center !important; */
}

.block_center img {
  width: 100%;
  height: 100%;
}

.block_center p {
  display: block;
  position: relative;
  text-align: center;
  font-size: 20px;
  margin-top: 5%;
  margin-bottom: 4%;
}


/*
.main_content::after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
}

.main::after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
}
*/
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="main_content">
    <a href "#" class="back_image">
      <img src="Images/1.jpeg" />
      <div class="text">
        <p> О нас </p>
      </div>
    </a>
  </div>

  <div class="main_content">
    <a href="#" class="back_image">
      <img src="Images/2.jpeg" />
      <div class="text">
        <p> Top </p>
      </div>

    </a>
  </div>

  <div class="main_content">
    <a href="#" class="back_image">
      <img src="Images/3.jpeg" />
      <div class="text">
        <p> New </p>
      </div>
    </a>
  </div>

  <div class="main_content">
    <a href="#" class="back_image">
      <img src="Images/4.jpeg" />
      <div class="text">
        <p> Исполнители </p>
      </div>
    </a>
  </div>

  <div class="block_center">
    <a href="# " class="center_image ">
      <img src="Images/vinyl.gif " />
      <div class="text ">
        <p> <a href="# "> Личный кабинет </a> </p>
        <p> <a href="# "> Гарантии </a> </p>
        <p> <a href="# "> Оплата\Доставка </a> </p>
        <p> <a href="# "> Контакты </a> </p>
      </div>
      <!-- </a> -->
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

6 个答案:

答案 0 :(得分：1)

这实际上非常简单。

有两种快速方法可以做到这一点。最简单的方法是使用CSS :hover伪选择器，如下所示：

.text {
    display:none;
}
.main_content:hover .text {
    display: block;
}

或者使用find()选择器上的$(this)语句使用JavaScript，如下所示：

$('.main-content').mouseenter(function(){
    $(this).find('.text').fadeIn();
});

$('.main-content').mouseleave(function(){
    $(this).find('.text').fadeOut();
})

答案 1 :(得分：1)

纯CSS肯定：

.main_content > a > .text {
    display: none;
}

.main_content:hover > a > .text {
    display: block;
}

答案 2 :(得分：0)

$(document).ready(function () {
    $('.main_content').mouseenter(function() {
        $(this).find('.text').css('display','block');
    });
    $('.main_content').mouseleave(function() {
        $(this).find('.text').css('display','none');
    });
});

答案 3 :(得分：0)

您可以使用解决方案https://jsfiddle.net/5ove7e46/

＆＃13;
＆＃13; 
$(document).ready(function () {
   $('.main_content').hover(function(){
   	$(this).find('div.text').toggle();
   });  
});
＆＃13; 
@font-face {
    font-family: "SevillaDecor"; /* Гарнитура шрифта */
    src: url(/SevillaDecor.ttf); /* Путь к файлу со шрифтом */
   }

* {
	margin:0;
	padding:0;
}
body {
	font-family: "SevillaDecor", Regular;
	font-variant: small-caps;
	font-weight: 600;
	/* font-style: oblique; */
}

a {
    display: block;
    position: relative;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: #0af5ec;
}

.wrapper {
    position: absolute;

    /* top: 0px; */
    /* left: 0px; */
    /* clear: both; */
    width: 100%;
    height: 100%;
    /* overflow: hidden; */
}


.text {
    /* display: block; */
    position: absolute;
    display: none;
	  top:0;
    height: 100%;
    width: 100%;
}

.main_content {
    font-size: 30pt;
    /* position: relative; */
    float: left;
    width: 50%;
    height: 50%;
    /* margin: 0; */
    /* padding: 0; */
    overflow: hidden;
    /* background-size: cover; */
    /* text-align: center !important; */
}

.main_content img{
    /* position:absolute; */
	/* min-width: 50%; */
    /* max-width: 100%; */
    /* background-size: cover; */
    width: 100%;
	height: 100%;
}

.block_center {
	/* display:none; */
    position: absolute;
    width: 185pt;
    height: 185pt;
    /* font-size: 15pt; */
    top: 50%;
    left: 50%;
    margin: -95pt;
    overflow: hidden;
    /* background-size: contain; */
    /* text-align: center !important; */
}

.block_center img {
	width: 100%;
    height: 100%;
}

.block_center p {
	display: block;
    position: relative;
    text-align: center;
    font-size: 20px;
    margin-top: 5%;
    margin-bottom: 4%;
}





/*
.main_content::after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
}

.main::after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
}
*/
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "wrapper">
  <div class = "main_content"  > 
      <a href="#" class = "back_image" >
          <img src = "Images/1.jpeg"/>
          <div class="text">
              <p> О нас </p>
          </div>
      </a>
  </div>

  <div class = "main_content" >
      <a href = "#" class = "back_image">
          <img src = "Images/2.jpeg"/>
          <div class = "text">
              <p> Top </p>
          </div>

      </a>
  </div>
＆＃13;
＆＃13;
＆＃13;

代码更改

<强> CSS 

.text{display: none;}

<强> JS 

$('.main_content').hover(function(){
    $(this).find('div.text').toggle();
});

答案 4 :(得分：0)

$( ".main_content" ).hover(
  function() {
    $(this).show();
  }, function() {
    $(this).hide();
  }
);

答案 5 :(得分：0)

这种效果可以在CSS中实现：

hide

当您将鼠标悬停在容器上时，img淡出并且文本淡入，以便

  

只显示此块的文本

style="top: 162px; left: 320px;"
.main_content img {
  opacity:1;
}
.main_content .text {
  opacity:0;
}
.main_content .text,
.main_content img {
  transition:opacity 0.6s linear;
}
.main_content:hover img {
  opacity: 0;
}
.main_content:hover .text {
  opacity: 1;
 }

相关问题
最新问题