Question

当用户在初始div上盘旋时，我试图将div显示在另一个div上：

这里的代码（应该如下）： http://jsfiddle.net/si69j2/rwfbzszn/

我的问题是应该在悬停时出现的div没有出现在我想到的地方。我设置了这个位置：绝对不是相对于促销卡div的定位我期望它出现在这个区域上，而是看起来像它，或者至少看起来像是在促销栏上。

我怀疑有人会说这个问题已经得到了解答，但是我没有看到它，所以无论如何都会很感激。

＆＃13;

.promo-bar {
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.promo-card {
    z-index 1;
    text-align: center;
    align-content: center;
    border: 1px solid;
    width: 30%;
    float: left;
    margin:  1.66%;
    text-decoration: none;
    letter-spacing: normal;
    box-shadow: 0px 1px 10px 2px rgba(0,0,0,0.12);
}

.promo-cardhover {
    opacity: 0;
    transition: opacity 0.5s linear 0s;
    visibility: hidden;
    z-index: 100;
    position:absolute;
}

.promo-card:hover + .promo-cardhover {
    opacity: 1;
    visibility: visible;
    width: 40%;
    height: inherit;
    background-color: pink;
 }

＆＃13;

<div class="promo-bar">
    <div class="promo-card promo-local">
        <div class="promo-title">
            Local
        </div>
        <div class="promo-content">
            <span class="promo-price-amount">£120</span>
            <span class="promo-time-period">ipsum</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac faucibus quam. Donec eleifend ex est.</p>
        </div>
    </div>
    <div class="promo-cardhover">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac faucibus quam. Donec eleifend ex est.
    </div>
    <div class="promo-card promo-national">
        <div class="promo-title">
            Ipsum
        </div>
        <div class="promo-content">
            <span class="promo-price-amount">£1200</span>
            <span class="promo-time-period">ipsum</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac faucibus quam. Donec eleifend ex est.</p>
        </div>
    </div>
    <div class="promo-cardhover">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac faucibus quam. Donec eleifend ex est.
    </div>
</div>

＆＃13;

更新

我还希望悬停的div与促销卡div的大小相同。

Answer 1

：一种。使悬停div显示相对于促销卡

它相对于promo-bar而不是promo-card出现的原因是因为promo-card只是一个兄弟 - promo-bar是它的父母，所以它是什么位置是相对的。

如果您在promo-cardhover div内移动promo-card，则它会相对于它显示。（找到＆＃34; A1＆＃34;代码中的注释）

注意，您还需要更改CSS中的以下行

.promo-card:hover + .promo-cardhover {

到

.promo-card:hover .promo-cardhover {

第一个目标是兄弟姐妹，但现在你需要它来瞄准一个孩子。（参见注释＆＃34; A2＆＃34;代码中）

<强> B中。更新：让悬停div覆盖父promo-card div

1。制作促销卡类position: relative（无论如何你应该这样做）

.promo-card {
    position: relative; /* B1. ADD THIS */
    [... other styles...]
}

2。将绝对位置设置为相对父级的角以覆盖整个区域（这需要父级具有position: relative，如步骤1）

.promo-cardhover {
    /*  B2. SET ABSOLUTE POSITIONING FOR THE WHOLE DIV */
    top:0; left:0; right:0; bottom:0;  
    [...]
}

3. 将宽度从40％更改为100％ - 否则它只会填充我们在步骤2中定义的区域的40％。

.promo-card:hover .promo-cardhover {
    width: 100%; /* B3. CHANGE THIS FROM 40%  */ 
    [...]
}

工作代码段

＆＃13;

.promo-bar {
  width: 100%;
  padding-left: 10%;
  padding-right: 10%;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.promo-card {
    z-index 1;
    text-align: center;
    align-content: center;
    border: 1px solid;
    width: 30%;
    float: left;
    margin:  1.66%;
    text-decoration: none;
    letter-spacing: normal;
    box-shadow: 0px 1px 10px 2px rgba(0,0,0,0.12);
    position: relative; /* B1. ADD THIS */
}

.promo-cardhover {
    opacity: 0;
    transition: opacity 0.5s linear 0s;
    visibility: hidden;
    z-index: 100;
    position:absolute;
    /*  B2. SET ABSOLUTE POSITIONING FOR THE WHOLE DIV */
    top:0; left:0; right:0; bottom:0
}

/* A2. Change this CSS to target a child instead of sibling  */
.promo-card:hover .promo-cardhover {
    opacity: 1;
    visibility: visible;
    width: 100%; /* B3. CHANGE THIS FROM 40%  */ 
    height: inherit;
    background-color: pink;
 }

＆＃13;

<div class="promo-bar">
    <div class="promo-card promo-local">
        <div class="promo-title">
            Local
        </div>
        <div class="promo-content">
            <span class="promo-price-amount">£120</span>
            <span class="promo-time-period">ipsum</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac faucibus quam. Donec eleifend ex est.</p>
        </div>

        <!-- A1. MOVE promo-cardhover DIV TO HERE! -->
        <div class="promo-cardhover">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac faucibus quam. Donec eleifend ex est.
        </div>

    </div>
    <div class="promo-card promo-national">
        <div class="promo-title">
            Ipsum
        </div>
        <div class="promo-content">
            <span class="promo-price-amount">£1200</span>
            <span class="promo-time-period">ipsum</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac faucibus quam. Donec eleifend ex est.</p>
        </div>

        <!-- A1. MOVE promo-cardhover DIV TO HERE! -->
        <div class="promo-cardhover">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas ac faucibus quam. Donec eleifend ex est.
        </div>
    </div>
</div>

＆＃13;

嵌套Divs悬停内容未正确定位

1 个答案: