Question

如何将它设置为当我将鼠标悬停在文本向下滑动的特定LI上时。我无法弄清楚如何检测特定的LI，只是我检测到它们并且全部向下滑动。 https://jsfiddle.net/9rmmddpn/1/

var cl = $(".cl");
var clHover = $(".cl li");
var clExtra = $(".cl_extra");

function clHoverIn(c) {
    clHover.mouseenter(function() {
        cl.children(c).slideDown();
    })
    cl.children(c).slideDown();
}

function clHoverOut(c) {
    clHover.mouseenter(function() {
        cl.children(c).slideUp();
    })
}



$(clHover.children(1)).mouseenter(function() {
    console.log("log!");
});

Answer 1

您的代码似乎过于复杂，无法实现所需的结果。

您可以使用jQuery hover函数来定义mouseenter和mouseleave事件处理程序。 https://api.jquery.com/hover/

第一个函数在鼠标悬停时触发，第二个函数在鼠标悬停时触发。

在这些功能中，$(this)将解析为您与之互动的项目。

然后，您可以将所需元素定位到slidingown或slideup。例如：$(this).find('.cl_extra').slideUp();

＆＃13;

$(".cl li").hover(function(){
 $(this).find('.cl_extra').slideDown();
}, function(){
 $(this).find('.cl_extra').slideUp();
});

＆＃13;

/* Stand
***************************/

body {
	width: 960px;
	margin: 0 auto;
	font-family: 'PT Sans Narrow', sans-serif;
	color: #000;
}

/***************************/

ul.cl {
	list-style-type: none;
	padding: 0;
}

ul.cl li {
	width: 25%;
	display: inline-block;
	padding: 10px 20px;
	border-radius: 10px 10px 0 0;
	background: #0EA4DB;
	color: #fff;
	box-shadow: 10px 15px 25px grey;
  
  vertical-align: top;
}

ul.cl li h1 {
	font-size: 40px;
	margin: 5px 0 0 0;
}

ul.cl li h2 {
	font-size: 12px;
	margin-bottom: 10px;
}

ul.cl li a {
	color: #fff;
	text-decoration: none;
}

ul.cl li span {
	color: #E8B928;
}

.cl_extra {
	display: none;
}

＆＃13;

<body>
	<ul class="cl">
		<li>
			<a href="#"><h1>Such News Much Wow</h1>
			<h2>Posted: 11-3-2017 by: <span>Dodge</span></h2></a>
			<p class="cl_extra">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eleifend elit dapibus aliquet euismod. Pellentesque feugiat placerat orci, a pretium nisi rhoncus id. Proin accumsan purus lacus, vitae dapibus turpis interdum quis. Mauris nulla libero, tempor a quam vitae, volutpat dapibus enim. Nunc tempor elementum leo, quis ultricies mauris pretium at. Pellentesque augue enim, efficitur quis elit vitae, dapibus venenatis neque. Sed vel turpis libero.</p>
		</li>
		<li>
			<a href="#"><h1>Such CSS Much JS</h1>
			<h2>Posted: 11-3-2017 by: <span>Dodge</span></h2></a>
			<p class="cl_extra">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eleifend elit dapibus aliquet euismod. Pellentesque feugiat placerat orci, a pretium nisi rhoncus id. Proin accumsan purus lacus, vitae dapibus turpis interdum quis. Mauris nulla libero, tempor a quam vitae, volutpat dapibus enim. Nunc tempor elementum leo, quis ultricies mauris pretium at. Pellentesque augue enim, efficitur quis elit vitae, dapibus venenatis neque. Sed vel turpis libero.</p>
		</li>
	</ul>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</body>

＆＃13;

Answer 2

我认为你应该在某个选择器上进行。

这样的事情：

$('.cl li').on('mouseenter', function(){
   $(this).children('p').slideDown();
}
$('.cl li').on('mouseleave', function(){
   $(this).children('p').slideUp();
}

如何查找无序列表的子项

2 个答案: