Question

我遇到以下代码的问题。我有一个剧透按钮，显示剧透文本，最初显示为text-shadow以隐藏内容。

在Chrome中，当我将光标放在扰流按钮上时，它看起来效果不佳，很难点击以显示剧透。

如果我从 span.show-spoiler-text 中删除text-shadow属性，它就可以了。

我认为这只发生在Webkit导航器中，因为我在Firefox中尝试并且运行良好。

我该如何解决？

提前谢谢。

＆＃13;

$(function()
  {
$("span.spoiler-text .show-spoiler-text").click(function() {
  var show_spoiler = $(this);

  var spoiler = show_spoiler.closest('span.spoiler-text');

  if (spoiler.hasClass('showing')) {
    spoiler.removeClass("showing");
  } else {
    spoiler.addClass("showing");
  }
});
  });

＆＃13;

span.show-spoiler-text {
    background: #610B0B;
    color: white;
    text-transform: uppercase;
    font-size: 10px;
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
    cursor: pointer; 
    text-shadow: 0 0 0px #610B0B;
}

span.show-spoiler-text:hover, .spoiler-text.showing span.show-spoiler-text { 
    font-weight: bold;   
}

.spoiler-text .spoiler-text-content {
    text-shadow: 0 0 15px #610B0B;
    color: transparent;
     -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
}

.spoiler-text.showing .spoiler-text-content
{
   text-shadow: 0 0 0px #610B0B;
   color: #610B0B;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <p class="entry-text">Lorem ipsum dolor <span class="spoiler-text"><span class="show-spoiler-text">Spoiler</span><span class="spoiler-text-content"> sit amet, consectetur adipiscing elit. Nullam luctus eu felis tristique facilisis. Nullam ut tristique tortor, vel varius tortor.</span></span>Nullam nibh nunc, ultricies at luctus quis, sodales posuere risus. Proin sagittis consectetur neque, ut laoreet nibh fringilla sit amet. Quisque tempor metus erat, at blandit mi rhoncus a. Mauris elementum mollis mollis. Quisque sit amet sollicitudin tortor, id aliquet mi. Donec convallis elit nec turpis volutpat, quis ornare leo lacinia. Proin dictum at mauris et tincidunt. Integer semper sed massa non tincidunt. Fusce facilisis, tellus vitae rhoncus aliquam, mi felis cursus tortor, non finibus augue ligula id enim. Sed ullamcorper enim quis pharetra sagittis.</p>

＆＃13;

Answer 1

对于显示您想要的方式的范围，您必须将其设置为display: block;，设置其宽度并在扰流板和之前的跨度上使用float: left。此外，您应该始终使用span来放置文本，使用javascript更容易操作。

$(function()
  {
    $("span.spoiler-text .show-spoiler-text").click(function() {
  var show_spoiler = $(this);

  var spoiler = show_spoiler.closest('span.spoiler-text');

  if (spoiler.hasClass('showing')) {
    spoiler.removeClass("showing");
  } else {
    spoiler.addClass("showing");
  }
    });
  
    $(".spoiler-text").prev().css("float", "left");

  });

span.show-spoiler-text {
    background: #610B0B;
    color: white;
    text-transform: uppercase;
    font-size: 10px;
    padding: 3px;
    border-radius: 5px;
    margin: 0 5px;
    cursor: pointer; 
    text-shadow: 0 0 0px #610B0B;
    display: block;
    width: 44px;
    float: left;
}

span.show-spoiler-text:hover, .spoiler-text.showing span.show-spoiler-text { 
    font-weight: bold;   
}

.spoiler-text .spoiler-text-content {
    text-shadow: 0 0 15px #610B0B;
    color: transparent;
     -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
}

.spoiler-text.showing .spoiler-text-content
{
   text-shadow: 0 0 0px #610B0B;
   color: #610B0B;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<p class="entry-text">
 <span>Lorem ipsum dolor</span>
 <span class="spoiler-text">
   <span class="show-spoiler-text">Spoiler</span>
   <span class="spoiler-text-content"> sit amet, consectetur adipiscing elit. Nullam luctus eu felis tristique facilisis. Nullam ut tristique tortor, vel varius tortor.
   </span>
 </span>

  
Nullam nibh nunc, ultricies at luctus quis, sodales posuere risus. Proin sagittis consectetur neque, ut laoreet nibh fringilla sit amet. Quisque tempor metus erat, at blandit mi rhoncus a. Mauris elementum mollis mollis. Quisque sit amet sollicitudin tortor, id aliquet mi. Donec convallis elit nec turpis volutpat, quis ornare leo lacinia. Proin dictum at mauris et tincidunt. Integer semper sed massa non tincidunt. Fusce facilisis, tellus vitae rhoncus aliquam, mi felis cursus tortor, non finibus augue ligula id enim. Sed ullamcorper enim quis pharetra sagittis.</p>

Answer 2

最后，我可以解决 .spoiler-text .spoiler-text-content 元素中的位置：相对。

$(function()
  {
$("span.spoiler-text .show-spoiler-text").click(function() {
  var show_spoiler = $(this);

  var spoiler = show_spoiler.closest('span.spoiler-text');

  if (spoiler.hasClass('showing')) {
    spoiler.removeClass("showing");
  } else {
    spoiler.addClass("showing");
  }
});
  });

span.show-spoiler-text {
    background: #610B0B;
    color: white;
    text-transform: uppercase;
    font-size: 10px;
    padding: 5px;
    border-radius: 5px;
    margin-right: 5px;
    cursor: pointer; 
    text-shadow: 0 0 0px #610B0B;
}

span.show-spoiler-text:hover, .spoiler-text.showing span.show-spoiler-text { 
    font-weight: bold;   
}

.spoiler-text .spoiler-text-content {
    text-shadow: 0px 0 15px #610B0B;
    color: transparent;
     -webkit-transition: text-shadow 0.2s linear;
    -moz-transition: text-shadow 0.2s linear;
    -ms-transition: text-shadow 0.2s linear;
    -o-transition: text-shadow 0.2s linear;
    transition: text-shadow 0.2s linear;
    position:relative;
}

.spoiler-text.showing .spoiler-text-content
{
   text-shadow: 0 0 0px #610B0B;
   color: #610B0B;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="entry-text">
 <span>Lorem ipsum dolor
Nullam nibh nunc, ultricies at luctus quis, sodales posuere risus. Proin sagittis consectetur neque, ut laoreet nibh fringilla sit amet. Quisque tempor metus erat, at blandit mi rhoncus a. Mauris elementum mollis mollis. Quisque sit amet sollicitudin tortor, id aliquet mi.</span><span class="spoiler-text">
   <span class="show-spoiler-text">Spoiler</span>
   <span class="spoiler-text-content"> sit amet, consectetur adipiscing elit. Nullam luctus eu felis tristique facilisis. Nullam ut tristique tortor, vel varius tortor. aaaaa aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
   </span>
 </span> Donec convallis elit nec turpis volutpat, quis ornare leo lacinia. Proin dictum at mauris et tincidunt. Integer semper sed massa non tincidunt. Fusce facilisis, tellus vitae rhoncus aliquam, mi felis cursus tortor, non finibus augue ligula id enim. Sed ullamcorper enim quis pharetra sagittis.</p>

使用Chrome中的text-shadow兄弟节点悬停在span中时出错

2 个答案: