将鼠标悬停在另一个单独的div

Question

我在网上搜索并发现了类似的问题，但是我无法达到我想要的结果。我不是最精通html / css /和javascript / jquery，所以我想知道我是如何格式化我的格式化所有内容，或者我尝试编写这些结果的路径。

我有三个圆圈，在页面中央平均间隔。每个圆圈链接到不同的页面。在一个圆圈上方悬停时，会显示一个跨度（通过更改css中的opacity属性），该跨度为该链接的位置提供标题。

我遇到的问题是：当您将鼠标悬停在每个圈子上时，除了显示提供标题的跨度之外，我还希望在圈子下方显示简短的描述性文字。当您将鼠标移出该圆圈时，描述性文本将消失。每个圆圈必须有自己的描述符文本。

从我收集的内容来看，jquery悬停在事件上可能是最好的方法，但是我似乎无法使语法正确以使其工作。

<script>
jQuery(document).ready(function() {
jQuery('#text1').hide();
});
jQuery(document).ready(function() {
jQuery('.grid_1').hover(function() {
jQuery(this).find('#text1').show();
},
function() {
jQuery('#text1').hide();
});
});
</script>

非常感谢任何和所有帮助。如果我要澄清任何事情，请告诉我。

Link to jsfiddle

Answer 1

您的jquery引用#text1，它应该是.text1，因为该元素是一个类。另外，$(this).find('.text').show();无法正常工作，因为.text不是您悬停在（$(this)）之上的孩子。只需使用$('.text1')

即可

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.text1').hide();
});
$(document).ready(function() {
  $('.grid_1').hover(function() {
      $('.text1').show();
    },
    function() {
      $('.text1').hide();
    });
});

＆＃13;

.gridcontainer {
	width: 720px;
	margin: 30px auto;
}

.grid_1 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}
.grid_2 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}
.grid_3 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}


.fmcircle_out {
	width: 200px;
	height: 200px;
	text-align: center;
	display: block;
	margin-left: 10px;
	opacity: 0.75;	
	
	border-radius: 100px;
	border: solid 2.5px #8D8B8B;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	-o-border-radius: 100px;
	
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

	.fmcircle_out:hover {
		opacity: 1;	
		
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}

.fmcircle_in {
	width: 170px;
	height: 170px;
	margin: 15px;
	display: inline-block;
	overflow: hidden;
	
	border-radius: 85px;
	-moz-border-radius: 85px;
	-webkit-border-radius: 85px;
	-o-border-radius: 85px;
}

.fmcircle_in img {
	border: none;
	margin: 30px 25px 25px 25px;

		
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.fmcircle_in span {
	padding: 0;
	border: 0;
	vertical-align: baseline;
	width: 160px;
	background: #fff;
	color: #666666;
	padding: 5px;
	margin: 70px 0 0 0;
	height: 20px;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	position: absolute;
	opacity: 0;
	
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
		
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

	.fmcircle_out:hover .fmcircle_in span {
		opacity: 1;
		
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}
.fmcircle_out:focus {
	opacity: 1;
}
.fmcircle_blue {
	background-color: #35C317;
}

.fmcircle_red {
	background-color: #BA282B;
}

.fmcircle_green {
	background-color: #2E70DC;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="gridcontainer clearfix">
  <div class="grid_1">
    <div class="fmcircle_out">
      <a href="link1.html">
        <div class="fmcircle_in fmcircle_blue">
          <span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
        </div>
      </a>
    </div>
  </div>

  <div class="grid_2">
    <div class="fmcircle_out">
      <a href="link2.html">
        <div class="fmcircle_in fmcircle_green">
          <span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
        </div>
      </a>
    </div>
  </div>

  <div class="grid_3">
    <div class="fmcircle_out">
      <a href="link3.html">
        <div class="fmcircle_in fmcircle_red">
          <span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
        </div>
      </a>
    </div>
  </div>
</div>

<div class="text_container">
  <p class="text1">Text box1</p>
  <p class="text2">Text box2</p>
  <p class="text3">text box3</p>
</div>

＆＃13;

＆＃13;

＆＃13;

虽然我会重新编写它，使其更灵活，代码更少，但在data个圈子中使用.grid属性来定义要显示的文本块类，然后添加/删除显示文本的类，而不是使用jquery＆＃39; s $.hide()和$.show()

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.grid').hover(function() {
      $($(this).attr('data-text')).addClass('show');
    },
    function() {
      $($(this).attr('data-text')).removeClass('show');
    });
});

＆＃13;

.gridcontainer {
	width: 720px;
	margin: 30px auto;
}

.grid_1 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}
.grid_2 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}
.grid_3 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}


.fmcircle_out {
	width: 200px;
	height: 200px;
	text-align: center;
	display: block;
	margin-left: 10px;
	opacity: 0.75;	
	
	border-radius: 100px;
	border: solid 2.5px #8D8B8B;
	-moz-border-radius: 100px;
	-webkit-border-radius: 100px;
	-o-border-radius: 100px;
	
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

	.fmcircle_out:hover {
		opacity: 1;	
		
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}

.fmcircle_in {
	width: 170px;
	height: 170px;
	margin: 15px;
	display: inline-block;
	overflow: hidden;
	
	border-radius: 85px;
	-moz-border-radius: 85px;
	-webkit-border-radius: 85px;
	-o-border-radius: 85px;
}

.fmcircle_in img {
	border: none;
	margin: 30px 25px 25px 25px;

		
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

.fmcircle_in span {
	padding: 0;
	border: 0;
	vertical-align: baseline;
	width: 160px;
	background: #fff;
	color: #666666;
	padding: 5px;
	margin: 70px 0 0 0;
	height: 20px;
	text-align: center;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	position: absolute;
	opacity: 0;
	
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	-o-border-radius: 2px;
		
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.2s linear;
}

	.fmcircle_out:hover .fmcircle_in span {
		opacity: 1;
		
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
		-ms-transition: all 0.2s linear;
		transition: all 0.2s linear;
	}
.fmcircle_out:focus {
	opacity: 1;
}
.fmcircle_blue {
	background-color: #35C317;
}

.fmcircle_red {
	background-color: #BA282B;
}

.fmcircle_green {
	background-color: #2E70DC;
}

.text {
  display: none;
}
.show {
  display: block;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="gridcontainer clearfix">
  <div class="grid_1 grid" data-text=".text1">
    <div class="fmcircle_out">
      <a href="link1.html">
        <div class="fmcircle_in fmcircle_blue">
          <span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
        </div>
      </a>
    </div>
  </div>

  <div class="grid_2 grid" data-text=".text2">
    <div class="fmcircle_out">
      <a href="link2.html">
        <div class="fmcircle_in fmcircle_green">
          <span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
        </div>
      </a>
    </div>
  </div>

  <div class="grid_3 grid" data-text=".text3">
    <div class="fmcircle_out">
      <a href="link3.html">
        <div class="fmcircle_in fmcircle_red">
          <span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
        </div>
      </a>
    </div>
  </div>
</div>

<div class="text_container">
  <p class="text1 text">Text box1</p>
  <p class="text2 text">Text box2</p>
  <p class="text3 text">text box3</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我提供了一个css解决方案，因为存在一个jquery答案

将以下内容添加到您的css

.fmcircle_out:hover .description{
    opacity:1;
  }
  .description{
    opacity:0;
    transition:opacity 1s;
  }
  .fmcircle_out a{
    text-decoration:none;
  }
.fmcircle_out:focus {
    opacity: 1;
}

请参阅代码段（请注意，如果您愿意，可以将这些规则添加到已声明的现有规则中）

＆＃13;

＆＃13;

.gridcontainer {
  width: 720px;
  margin: 30px auto;
}

.grid_1 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

.grid_2 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

.grid_3 {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 220px;
}

.fmcircle_out {
  width: 200px;
  height: 200px;
  text-align: center;
  display: block;
  margin-left: 10px;
  opacity: 0.75;
  border-radius: 100px;
  border: solid 2.5px #8D8B8B;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  -o-border-radius: 100px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.fmcircle_out:hover {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.fmcircle_in {
  width: 170px;
  height: 170px;
  margin: 15px;
  display: inline-block;
  overflow: hidden;
  border-radius: 85px;
  -moz-border-radius: 85px;
  -webkit-border-radius: 85px;
  -o-border-radius: 85px;
}

.fmcircle_in img {
  border: none;
  margin: 30px 25px 25px 25px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.fmcircle_in span {
  padding: 0;
  border: 0;
  vertical-align: baseline;
  width: 160px;
  background: #fff;
  color: #666666;
  padding: 5px;
  margin: 70px 0 0 0;
  height: 20px;
  text-align: center;
  font-weight: bold;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: absolute;
  opacity: 0;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  -o-border-radius: 2px;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.fmcircle_out:hover .fmcircle_in span {
  opacity: 1;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  transition: all 0.2s linear;
}

.fmcircle_out:hover .description {
  opacity: 1;
}

.description {
  opacity: 0;
  transition: opacity 1s;
}

.fmcircle_out a {
  text-decoration: none;
}

.fmcircle_out:focus {
  opacity: 1;
}

.fmcircle_blue {
  background-color: #35C317;
}

.fmcircle_red {
  background-color: #BA282B;
}

.fmcircle_green {
  background-color: #2E70DC;
}

＆＃13;

<div class="gridcontainer clearfix">
  <div class="grid_1">
    <div class="fmcircle_out">
      <a href="link1.html">
        <div class="fmcircle_in fmcircle_blue">
          <span>Link 1</span><img src="images/image location1" alt="image1" class="image1" />
        </div>
        <div class="description">This link describes option 1</div>
      </a>
    </div>
  </div>

  <div class="grid_2">
    <div class="fmcircle_out">
      <a href="link2.html">
        <div class="fmcircle_in fmcircle_green">
          <span>Link 2</span><img src="images/image location2" alt="image2" class="image2" />
        </div>
        <div class="description">This link describes option 2</div>
      </a>
    </div>
  </div>

  <div class="grid_3">
    <div class="fmcircle_out">
      <a href="link3.html">
        <div class="fmcircle_in fmcircle_red">
          <span>Link 3</span><img src="images/image location3" alt="image3" class="image3" />
        </div>
        <div class="description">This link describes option 3</div>
      </a>
    </div>
  </div>
</div>

<div class="text_container">
  <p class="text1">Text box1</p>
  <p class="text2">Text box2</p>
  <p class="text3">text box3</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

Jquery代码在鼠标移出时隐藏另一个div并使其可见。

<script>
 $(document).ready(function(){
  $('.grid_1').hover(     
   function () {
  $('#text1').hide();
 }, 

 function () {
   $('#text1').show();
  }
   );
  });