Question

我遇到这种情况：

＆＃13;

p {
    position: relative;
    margin: 0;
    padding: 0;
    height: 20px;
}
.Symbol {
    overflow: hidden;
}
.Symbol:hover {
    overflow: visible;
}

＆＃13;

<div class="Symbol" style="height: 80px; position:relative">
    <img src="https://placehold.it/80x200" height="200" width="80"/>
</div>

<p>
text
</p>

＆＃13;

当我悬停图像时，所有图像都会出现但是当光标越过p元素时，图像溢出：可见禁用。我不想要那个。我需要在悬停时将图像放在其他元素之上。

感谢。

Answer 1

.Symbol:hover {
    overflow: visible;
    z-index:1
}

Answer 2

在悬停状态下使用z-index属性使图像位于文本上方。

p {
    position: relative;
    margin: 0;
    padding: 0;
    height: 20px;
}
.Symbol {
    overflow: hidden;
}
.Symbol:hover {
    overflow: visible;
    z-index: 10;
}

<div class="Symbol" style="height: 80px; position:relative">
    <img src="https://placehold.it/80x200" height="200" width="80"/>
</div>

<p>
text
</p>

Answer 3

试试这个解决方案：

p {
    position: absolute; /* position in div.Symbol */
    top: 50%; /* centering */
    margin-top: -10px; /* centering */
    left: 0;
    height: 20px;
}
.Symbol {
    position: relative; /* we try to position p */
    height: 80px;
}

.Symbol img {
    display: block; 
    max-height: 100%;
    opacity: 0; /* non visible */
    transition: opacity .2s; /* basic animation */
} 
.Symbol:hover img {
    opacity: 1; /* visible on :hover */
}

<div class="Symbol">
    <img src="https://codingzap.com/wp-content/uploads/2017/09/html.png" alt=""/>
    <p>text</p>
</div>

Answer 4

您需要设置元素的高度，如果不这样做，元素将具有相同的高度，并且不会移动文本。

<?php

$query1 = "select * from `seller` where seller_pincode = $pincode";
$run_query1 = mysqli_query($con, $query1);
$count_seller = mysqli_num_rows($run_query1);

if ($count_seller == 0)
{
    $semail = "example@gmail.com";
    $sname = $saddress = $spincode = $scity = $sstate = $sphone = $sgst = $span = "Not Available";
}
else
{
    while ($row_seller = mysqli_fetch_array($run_query1))
    {
        $semail = $row_seller['seller_email'] . ",example@gmail.com";
    }
}

$email = $semail;
$subject = "Order Details";
$message = 'You got a new Order!!! ";

require_once('mailer / class . phpmailer . php);

$mail = new PHPMailer();
$mail->IsSMTP();
$mail->SMTPDebug = 0;
$mail->SMTPAuth = true;
$mail->SMTPSecure = "tls";
$mail->Subject = $subject;
$mail->MsgHTML($message);
$mail->Send();

p {
    margin: 0;
    padding: 0;
    height: 20px;
}
.Symbol {
    overflow: hidden;
    height: 80px;
}
.Symbol:hover {
    overflow: visible;
    height: 200px;
}

在悬停图像时使图像从隐藏变为可见

4 个答案: