需要帮助以使用 wrap 标签中的链接创建覆盖效果答案

【问题标题】：Need help to create an overlay efffect with links in a wrap tag需要帮助以使用 wrap 标签中的链接创建覆盖效果
【发布时间】：2014-04-30 19:38:19
【问题描述】：

我在一个 div id="rplan_cat" 中有 18 个链接

我希望每个链接在“rplan_cat”中打开一个覆盖层，其中包含所有链接内容。如果这是可能的，任何人都可以指导我使用 jquery 的最佳方法吗？

这是我的页面链接：网页

我附上了我想要的插图：

这是我的代码：

<div id="rplan_cat">
   <div id="rplan_cat_title" style="min-width:66.4%;border-right:1px solid #4D4D4D;border-bottom:1px solid #FFF;">Recovery Plan Categories</div>
   <div id="rplan_cat_title" style="min-width:33.1%;border-bottom:1px solid #FFF;"></div>
             <a href="#" class="cat_width1 cat_medical">Medical Aid</a>
             <a href="#" class="cat_width1 cat_therapy">Therapy</a>
             <a href="#" class="cat_width2 cat_food">Food</a>
             <a href="#" class="cat_width1 cat_trans">Transportation</a>
             <a href="#" class="cat_width1 cat_counsel">Counseling</a>
             <a href="#" class="cat_width2 cat_job">Job Placement</a>
             <a href="#" class="cat_width1 cat_shelter">Shelter</a>
             <a href="#" class="cat_width1 cat_emerg">Emergencies</a>
             <a href="#" class="cat_width2 cat_school">Schooling</a>
             <a href="#" class="cat_width1 cat_house">Housing</a>
             <a href="#" class="cat_width1 cat_gear">Survival Gear</a>
             <a href="#" class="cat_width2 cat_reunion">Reunions</a>
             <a href="#" class="cat_width1 cat_legal">Legal Aid</a>
             <a href="#" class="cat_width1 cat_debt">Debt Relief</a>
             <a href="#" class="cat_width2 cat_bed">Bedding</a>
             <a href="#" class="cat_width1 cat_jobtrain">Job Training</a>
             <a href="#" class="cat_width1 cat_hygiene">Hygiene</a>
             <a href="#" class="cat_width2 cat_clothes">Clothing</a>
             <div style="width:100%;height:33px;float:left"></div>
 </div>

这是 CSS：

#rplan_wrap                 {width: 100%;float:left;}
#rplan_wrap  .rplan         {width:160px;height:60px;line-height:60px;float:left;background:#C04747;color:#FFF;border-bottom: 0;font-family:'robotoregular' ;margin-top:20px;text-align:center;transition: background 0.5s ease-in-out;}
#rplan_wrap  .rplan:hover   {background:#4D4D4D;text-decoration:none;border-bottom: 0;}
#rplan_cat                  {width:100%;float:left;margin-top:30px;}
#rplan_cat_title            {height:50px;background:#4D4D4D; color:#FFF;font-size:.9em;float:left;line-height:50px;text-indent:25px}
#rplan_cat  a               {min-width:33.1%;height:110px;line-height: 150px;float:left;border:0;font-family:'robotoregular';text-align:center;color:#4D4D4D;font-size:.9em;transition: background 0.5s ease-in-out;}
.cat_width1                 {margin-right:1px;margin-bottom:1px}
.cat_width2                 {margin-bottom:1px}
.cat_medical                {background: #E6E6E6 url('img/cat_medical.png') 50% 23px no-repeat;}
.cat_medical:hover          {background: #E5FF17 url('img/cat_medical.png') 50% 23px no-repeat;}
.cat_therapy                {background: #E6E6E6 url('img/cat_therapy.png') 50% 23px no-repeat;}
.cat_therapy:hover          {background: #E5FF17 url('img/cat_therapy.png') 50% 23px no-repeat;}
.cat_food                   {background: #E6E6E6 url('img/cat_food.png')    50% 23px no-repeat;}
.cat_food:hover             {background: #E5FF17 url('img/cat_food.png')    50% 23px no-repeat;}
.cat_trans                  {background: #E6E6E6 url('img/cat_trans.png')   50% 23px no-repeat;}
.cat_trans:hover            {background: #E5FF17 url('img/cat_trans.png')   50% 23px no-repeat;}
.cat_counsel                {background: #E6E6E6 url('img/cat_counsel.png') 50% 23px no-repeat;}
.cat_counsel:hover          {background: #E5FF17 url('img/cat_counsel.png') 50% 23px no-repeat;}
.cat_job                    {background: #E6E6E6 url('img/cat_job.png')     50% 23px no-repeat;}
.cat_job:hover              {background: #E5FF17 url('img/cat_job.png')     50% 23px no-repeat;}
.cat_shelter                {background: #E6E6E6 url('img/cat_shelter.png') 50% 23px no-repeat;}
.cat_shelter:hover          {background: #E5FF17 url('img/cat_shelter.png') 50% 23px no-repeat;}

.cat_emerg {背景：#E6E6E6 url('img/cat_emerg.png') 50% 23px no-repeat;} .cat_emerg:hover {背景：#E5FF17 url('img/cat_emerg.png') 50% 23px no-repeat;} .cat_school {背景：#E6E6E6 url('img/cat_school.png') 50% 23px no-repeat;} .cat_school:hover {背景：#E5FF17 url('img/cat_school.png') 50% 23px no-repeat;} .cat_house {背景：#E6E6E6 url('img/cat_house.png') 50% 23px no-repeat;} .cat_house:hover {背景：#E5FF17 url('img/cat_house.png') 50% 23px no-repeat;} .cat_gear {背景：#E6E6E6 url('img/cat_gear.png') 50% 23px no-repeat;} .cat_gear:hover {背景：#E5FF17 url('img/cat_gear.png') 50% 23px no-repeat;} .cat_reunion {背景：#E6E6E6 url('img/cat_reunion.png') 50% 23px no-repeat;} .cat_reunion:hover {背景：#E5FF17 url('img/cat_reunion.png') 50% 23px no-repeat;} .cat_legal {背景：#E6E6E6 url('img/cat_legal.png') 50% 23px no-repeat;} .cat_legal:hover {背景：#E5FF17 url('img/cat_legal.png') 50% 23px no-repeat;} .cat_debt {背景：#E6E6E6 url('img/cat_debt.png') 50% 23px no-repeat;} .cat_debt:hover {背景：#E5FF17 url('img/cat_debt.png') 50% 23px no-repeat;} .cat_bed {背景：#E6E6E6 url('img/cat_bed.png') 50% 23px no-repeat;} .cat_bed:hover {背景：#E5FF17 url('img/cat_bed.png') 50% 23px no-repeat;} .cat_jobtrain {背景：#E6E6E6 url('img/cat_jobtrain.png')50% 23px no-repeat;} .cat_jobtrain:hover {背景：#E5FF17 url('img/cat_jobtrain.png')50% 23px no-repeat;} .cat_hygiene {背景：#E6E6E6 url('img/cat_hygiene.png') 50% 23px no-repeat;} .cat_hygiene:hover {背景：#E5FF17 url('img/cat_hygiene.png') 50% 23px no-repeat;} .cat_clothes {背景：#E6E6E6 url('img/cat_clothes.png') 50% 23px no-repeat;} .cat_clothes:hover {背景：#E5FF17 url('img/cat_clothes.png') 50% 23px no-repeat;}

【问题讨论】：

如果你发布 CSS 我会让你成为一个小提琴;)
在你担心javascript之前，你能用CSS来做吗？ javascript 只是要在两种状态之间切换。

标签： jquery html css overlay css-transitions

【解决方案1】：

这是一个FIDDLE

我用id 匹配到锚第二类属性创建了内容div，以便能够使用jQuery 来定位它们。您拥有 Fiddle 中的所有内容。如果有不清楚的地方，请随时提问。

HTML

<div id="cat_medical" class="content">
   Cat Medical
</div>

<div id="cat_therapy" class="content">
   Cat Therapy
</div>

<div id="cat_food" class="content">
   Cat Food
</div>

...

CSS

#rplan_cat {
  position:relative;
  width:100%;
  float:left;
  margin-top:30px;
}
.content {
  background: #e6e6e6;
  position: absolute;
  display: none;
  top: 50px;
  left: 0;
  width: 100%;
  height: 660px;
  padding: 15px;    
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.close {
  position: absolute;
  top: 15px;
  right: 15px;
  font-family: Verdana;
  font-size: 18px;
  font-weight: bold;
  color: #4d4d4d;
  cursor: pointer;
}

jQuery

(function($) {
  $('#rplan_cat a').click(function(e) {
    e.preventDefault();
    $('#'+$(this).attr('class').split(' ')[1]).fadeIn(400);
  });
  $('.content').append('<span class="close">X</span>');
  $('.close').on('click',function() {
    $('.content').fadeOut(400);
  });
})(jQuery);

【讨论】：

非常感谢。非常感谢。当我点击一个链接时，叠加层看起来很棒，但我注意到它的高度比原始状态大。
叠加层向下延伸更长的滚动条
是否可以在其中添加 css 过渡？
我固定了覆盖高度，你想要什么过渡？
覆盖向右几个像素。

【解决方案2】：

这里是a jsFiddle。

这些是基本概念。不希望它们出现在列表中？没关系。使用 div 或仅使用 a，但请注意 DOM 遍历可能略有不同。

此外，页面高度和陷阱还有很多问题，实际上使这种响应式页面滚动 - 溢出等 - 所以要做好准备。（请注意，javascript 使用 jQuery - 所以您需要包含它。为了将来参考，您发布的所有代码都是无用的。在您的案例中，html 的前 4 行就足够了。请参阅this jsfiddle是，并在下次记住这一点。您的特定文字或徽标无关紧要。

这很大程度上取决于对定位的充分理解。相对的，绝对的，固定的，静态的。目前我为弹出窗口使用了固定，因为如果我使用绝对，你可能会创建一个相对的容器，这会改变一切，所以请记住这一点。了解相对 div 如何描述其中元素的绝对边界。

此处的数据属性可以很好地连接图标和聚光灯，但由于您无法返回查看更多图标，直到您关闭第一个图标，所以不需要特殊性。

我在弹出内容周围有一个名为 .text-w 的内部包装器，这样我们就可以有 2 个过渡效果。请注意我如何将类添加到外部元素，并使用该类来定位其中的所有元素，而不是为每个元素添加一个类。这基本上改变了一个区域而不是一个元素的上下文。由于 Sass 或 Stylus 的嵌套功能，它会使其更易于读写。

HTML

<ul class="your-list">
    <li>
        <a href="#" class="icon">01</a>
        <div class="spotlight">
            <div class="text-w">
                <h1>Spotlight 01 name</h1>
                <p>bla bla bla</p>
                <button>close this</button>
            </div>
        </div>
    </li>
    <li>
        etc...
    </li>
</ul>

CSS

*, *:before, *:after {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
}

body {
    margin: 0;
}

a {
    text-decoration: none;
    color: inherit;
}

.your-list {
    list-style: none;
    margin: 0; padding: 0;
}

.your-list li {
    width: 25%;
    float: left;
    border: 1px solid gray;
}

.your-list a {
    display: block;
    background-color: lightgray;
    min-height: 5em;
    padding: 1rem;
}

.your-list .spotlight {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
/* width: 100%;
    height: 100%; */
    width: 0;
    height: 0;
    overflow: hidden;
    background: yellow;
    padding: 0;
    transition: all .5s ease-in-out;
    transition-delay: .2s;
}

.your-list .spotlight .text-w {
    opacity: 0;
    transition: opacity .2s ease-in-out;
}

.your-list .show-spotlight {
    width: 100%;
    height: 100%;
    background: red;
    padding: 1rem;
    transition: all .5s ease-in-out;
}

.your-list .show-spotlight .text-w {
    opacity: 1;
    transition: opacity .2s ease-in-out;
    transition-delay: .5s;
}

jQuery

$('.your-list .icon').on('click', function() {
    $(this).closest('li').find('.spotlight').addClass('show-spotlight');
});

$('.your-list .spotlight button').on('click', function() {
    $(this).closest('.spotlight').removeClass('show-spotlight');
});

jQuery 解释...

/* when .icon is clicked... run this function... */
$('.icon').on('click', function() {
    /* $(this) means... the element the function is based on... 
    so in this case, .icon --- but not all .icon... 
    just the one you clicked... so it's relative to the specific action */
    $(this).closest('li').find('.spotlight').addClass('show-spotlight');
    /* so... with this icon... use closest() to traverse up the DOM tree nodes 
    and find the closest li... then go down the DOM tree and find the nearest .spotlight... 
    and add a class... you could use fadeIn() or something else too. 
    This class is what has the transitions in your CSS */
});

$('.spotlight button').on('click', function() {
    $(this).closest('.spotlight').removeClass('show-spotlight');
    /* when you click the button
    go up the DOM and find the closest .spotlight and remove the class 
    different transitions can happen when you add or remove based on your CSS*/
});

DOM 遍历的原因是，你将来可能会在这之间有一些东西 - 所以 .next() 不好。

您可以查看this CodePen 以获得更强大的示例，以及它的 SCSS - 以及按列表项定位和设置样式的简洁方法。

【讨论】：