Question

根据网页设计，我应该制作css hover效果。

目前我已经完成了悬停效果的CSS形状，但我真的不知道如何将其实现为悬停效果。

我应该使用JavaScript还是可能有其他方法来实现这一目标？拜托，帮助我吧，我真的很难受。为了更好地理解，最终版本应如下图所示：

以下是CSS形状的示例，我需要将其作为悬停效果实现。

#base {
  background: #0a863d;
  display: inline-block;
  height: 66px;
  margin-top: 20px;
  margin-right: 55px;
  position: relative;
  width: 500px;
}
#base:before {
  border-left: 35px solid #0a863d;
  border-top: 33px solid transparent;
  border-bottom: 33px solid transparent;
  content: "";
  height: 0;
  top: 0;
  position: absolute;
  right: -35px;
  width: 0;
}

<div id="base"></div>

对于此HTML代码，我需要实现悬停效果=＆gt;

<div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12">
  <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
  <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
  <div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
  <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
  <div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
  <div class="shadow-effect"><p class="may">ООО Май</p></div>
</div>

Answer 1

You just need to change background-color on hover and show triangle using pseudoelement. Demo:

.left-menu {
  width: 250px;
}

.left-menu-item {  
  position: relative;
  /* height to fit triangle to the right */
  height: 66px;
  
  /* styles for centering text */
  display: flex;
  /* center vertically */
  align-items: center;
  /* center horizontally */
  justify-content: center;
  
  /* just styles for demo */
  background-color: #066d30;
  color: #fff;
  font-weight: bold;
}

/* change background-color on hover */
.left-menu-item:hover {
  background-color: #1d8631;
}

/* show triangle on hover */
.left-menu-item:hover:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  border-left: 33px solid #1d8631;
  border-top: 33px solid transparent;
  border-bottom: 33px solid transparent;
}

<div class="left-menu">
  <div class="left-menu-item">Ottogi</div>
  <div class="left-menu-item">Sayou Hapyo</div>
  <div class="left-menu-item">Natura Bogata</div>
  <div class="left-menu-item">TOO Many</div>
</div>

Answer 2

您已经完成了大部分工作。您只需将CSS选择器#base和#base:before更改为.shadow-effect:hover和.shadow-effect:hover:before。这意味着现在，当用户将鼠标悬停在.shadow-effect div上时，效果将会应用到您的.shadow-effect div。

此外，由于您为悬停设计提供了一些高度，宽度和边距，我也将它们添加到.shadow-effect:hover。因此，当您需要修改它们时，请在两个类中更改它们。另外，理想情况下，您应该从.shadow-effect { height: 66px; margin-top: 20px; margin-right: 55px; width: 500px; } .shadow-effect:hover { background: #0a863d; display: inline-block; height: 66px; margin-top: 20px; margin-right: 55px; position: relative; width: 500px; } .shadow-effect:hover:before { border-left: 35px solid #0a863d; border-top: 33px solid transparent; border-bottom: 33px solid transparent; content: ""; height: 0; top: 0; position: absolute; right: -35px; width: 0; }样式中删除这些样式。

＆＃13;

<div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12">
  <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
  <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
  <div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
  <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
  <div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
  <div class="shadow-effect"><p class="may">ООО Май</p></div>
</div>

＆＃13;

<!DOCTYPE>
<html lang="en">

<body>

    <form action="<?= htmlspecialchars($_SERVER['PHP_SELF']); ?>" 
     method="post"   enctype="multipart/form-data" id="form" >
      <input type="file" name="file" id="file" />
      <input type="submit" value="Upload Image" name="submit" id="submit" />
    </form>

    <p ><h2>Upload image here</h2></p>

    <div id="imageHolder" style="height:200px;max-height:200px;max-
    width:200px;width:200px;border:1px solid black;">
      <img src="" id="image" style="height: 200px;width: 200px;"/>

    </div>

</body>
</html>

<?php
if(isset($_POST['submit']) ) { 
$fileName = $_FILES['file']['name'];  
$fileTmpName = $_FILES['file']['tmp_name'];
$fileSize = $_FILES['file']['size'];
$fileError = $_FILES['file']['error'];

$maxFileSize = 200000;

$fileExt = explode(".", $fileName);
$currFileExt = strtolower(end($fileExt));

$allowed = array('jpg', 'jpeg', 'png', 'gif');

if(in_array($currFileExt, $allowed) ){

    if($fileSize < $maxFileSize) {
        if($fileError == 0){

            $uniqueFileName = uniqid('',true).".".$currFileExt;

            move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$uniqueFileName);

            ?>
                <script type="text/javascript">
                    document.getElementById('image').setAttribute("src","<?php echo 'uploads/'.$uniqueFileName;  ?>");
                </script>
            <?php

        } else {
            ?>
            <script type="text/javascript">
                document.getElementById('imageHolder').innerHTML = "There is an error in uploading file";
            </script>
            <?php
        }

    } else {

        ?>
            <script type="text/javascript">
                document.getElementById('imageHolder').innerHTML = "fileSize should be atmost 500kb";
            </script>
        <?php
    }


} else {
    ?>
        <script type="text/javascript">
            document.getElementById('imageHolder').innerHTML = "This type of file is not allowed";
        </script>
    <?php
}

}   
 ?>

＆＃13;

Answer 3

刚刚删除left border中的before，而不是在hover中再次添加.shadow-effect { display: inline-block; height: 66px; position: relative; width: 500px; text-align:center; } p{ line-height:2em; color:#fff; } .container{ padding-top:10px; background-color:#055f2a; width: 500px; } .shadow-effect:hover{ -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75); background: #0a863d; } .shadow-effect:hover:before { border-left: 35px solid #0a863d; } .shadow-effect:before { border-top: 33px solid transparent; border-bottom: 33px solid transparent; content: ""; height: 0; top: 0; position: absolute; right: -35px; width: 0; } 加上一个盒子阴影，所以它看起来像例子

＆＃13;

<div class="left-main col-lg-3 col-md-3 col-sm-12 col-xs-12 container">
  <div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
  <div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
  <div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
  <div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
  <div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
  <div class="shadow-effect"><p class="may">ООО Май</p></div>
</div>

＆＃13;

static boolean checkClick(List<Campaign> campaigns, Click click) {
    return campaigns.stream().anyMatch(camp -> camp.getCampaignId() 
               == click.getCampaignId());
}

＆＃13;

你只能用css实现这一点，检查出来

如何制作基本形状的CSS悬停效果？

3 个答案: