隐藏的div中href的CSS样式问题？

时间：2018-12-04 08:59:45

标签： javascript jquery html css

我在类样式方法collapse_content_selector的{​​{1}}内设置href链接的样式时遇到问题吗？ 在外部使用href样式。但是对于隐藏的div，它没有样式。我不确定是什么原因引起的。我举了一个小例子，其中所有视图都自定义突出显示，而“测试内部”视图未突出显示

代码示例： 

hover-regular
$(document).ready(function() {
    $('.nav-toggle').click(function() {
        var collapse_content_selector = $(this).attr('href');
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function() {
            if ($(this).css('display') == 'none') {
                toggle_switch.html('View All');
            } else {
                toggle_switch.html('Close');
            }
        });
    });
});
.hover-regular {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    position: relative;
}
.hover-regular:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: #007bff;
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
    transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
}
.hover-regular:hover:before {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

2 个答案:

答案 0 :(得分：0)

我认为这就是您要寻找的。您想要H5上的样式。除了H5的正常行为是display:block;之外，我还用它制作了display:inline，以确保它只会对文本下方的动画进行播放。

请考虑将style添加到您的CSS中。我只是这样做来解释我的更改。

$(document).ready(function() {
    $('.nav-toggle').click(function() {
        var collapse_content_selector = $(this).attr('href');
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function() {
            if ($(this).css('display') == 'none') {
                toggle_switch.html('View All');
            } else {
                toggle_switch.html('Close');
            }
        });
    });
});
.hover-regular {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
  position: relative;
}
.hover-regular:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: #007bff;
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
  transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
}
.hover-regular:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="jumbotron">
  <div id="collapse" style="display:none">

    <hr>
    <a href="https://mau.se/">
    <h5 class="hover-regular" style="display:inline;">Test</h5></a> <i>2018-</i><br>
    <span class="badge badge-pill badge-primary">Test</span>
    <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>

  </div>
  <div class="d-flex justify-content-center">
    <a class="nav-toggle hover-regular" href="#collapse">View All</a>
  </div>
</div>

这是一个不错的补充：Semantically, which is more correct: a in h2, or h2 in a?。这里将说明为什么要考虑在标头元素内添加a-href。但是，如果您使用的是HTML5，并且想在ahrefs中设置标题样式，那么当前的选择就是一个选择。

但是我认为，在您当前的情况下，最好的选择是切换a和h5，因为您只想在文本上悬停甚至删除display:block;部分（如果将a放在h5中，则没有必要。

<h5><a href="https://mau.se/" class="hover-regular">Test</a></h5>

答案 1 :(得分：0)

您需要在标签之外使用h5标签。然后内部测试将突出显示。

	$(document).ready(function() {
  $('.nav-toggle').click(function() {
		var collapse_content_selector = $(this).attr('href');
		var toggle_switch = $(this);
		$(collapse_content_selector).toggle(function() {
			if ($(this).css('display') == 'none') {
				toggle_switch.html('View All');
			} else {
				toggle_switch.html('Close');
			}
		});
	});
  });
.hover-regular {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-decoration: none;
	position: relative;
}
.hover-regular:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	bottom: 0;
	left: 0;
	background-color: #007bff;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	-webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
	transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
}
.hover-regular:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
			<div class="jumbotron">
				<div id="collapse" style="display:none">
					
					<hr>
                    <h5>
					<a class="hover-regular" href="https://mau.se/">
					Test</a></h5> <i>2018-</i><br>
					<span class="badge badge-pill badge-primary">Test</span>
					<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p>
				
				</div>
	<div class="d-flex justify-content-center">
				<a class="nav-toggle hover-regular" href="#collapse">View All</a>
			</div>
			</div>

相关问题
最新问题