Question

当div悬停时，我正试图影响外部元素。像这样：

<div class="affected">
  Hi
</div>

<div>
  <div class="hover-me"></div>
</div>

CSS：

.hover-me:hover ~ .affected {
  color: 
}

我已尝试过其他兄弟选择器，但它不起作用。

Answer 1

使用纯CSS，它会变得非常棘手。

一种方法， IF 你不需要包含hoverable子节点的div上的指针事件（悬停，点击等），将容器设置为可操作的div，禁用指针-events，将它们重置在孩子身上，并使用某种魔法让你的HTML上的兄弟姐妹按相反的顺序排列，这样他们就可以成为兄弟选择者的目标（因为你不能针对以前的兄弟姐妹）

像

这样的东西

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Customer Registration</h1>
<form action="oovalidation.php" method="post">
<label>Name</label>
<input type="text" name="name" id="nameField"/>
<br>
<label>Mobile</label>
<input type="text" name="mobile" id="mobileField"/>
<br>
<button type="submit" name="submit"> Add</button>
</form>

<script type="text/javascript">

function checkName(){
var text=document.getElementById("nameField").value;
if(text.length>=3){
    alert("Name is ok");
    return true;
}else{
    alert("Wrong name");
    return false;
}}

function checkMobile(){
var text=document.getElementById("mobileField").value;
if(text.length==10){
    alert("Mobile is ok");
    return true;
}else{
    alert("Wrong mobile");
    return false;
}}

function checkForm(){
var x=checkName();
var y=checkMobile();
return x&&y;
}

</script>
</body>
</html>


<?php
Class customer{
    private $name;
    private $mobile;

public function setName($name){
    $namelen=strlen($name);
    if($namelen>=3){
        $this->name=$name;
    return true;
    }else{
        echo "Wrong Name";
        return false;
        }
    }

public function getName(){
    return $this->name;
    }


public function setMobile($mobile){
    $mobilelen=strlen($mobile);
    if($mobilelen==10){
        $this->mobile=$mobile;
        return true;
    }else{
        echo "Wrong Mobile";
        return false;
        }
    }

public function getMobile(){
    return $this->mobile;
    }

public function save(){
$db=new DBManager();
$con=$db->getConnection();
$sql="insert into customer values('".$this->name."','".$this->mobile."')";
mysqli_query($con,$sql);
mysqli_close($con);
}
}

Class DBManager{
    private $hostname='localhost';
    private $dbuser='root';
    private $dbpass='123';
    private $dbname='sem3';

public function getConnection(){
    return mysqli_connect($this->hostname,$this->dbuser,$this->dbpass,$this->dbname);
}
}
    if(isset($_POST['submit'])){
    $name=$_POST['name'];
    $mobile=$_POST['mobile'];
    $x=new customer();
    $nameValidity=$x->setName($name);
    $mobileValidity=$x->setMobile($mobile);
    if($nameValidity && $mobileValidity)
        $x->save();

}

?>

＆＃13;

body{
  /*switches the oder of .affected and .hover-container, so .affected can be bellow in the HTML and be targeted with sibling selectors, while showing above*/
  display:flex;
  flex-direction:column-reverse;
}

.hover-container:hover ~ .affected{
/*targets the action on the container*/
  background:red;
}

.hover-container{
/*disables pointer-events on the container, so entering it won't cause the hover effect on the sibling*/
  pointer-events:none;
}

.hover-me{
/*resets pointer-events on the .hover-me child, so the previous :hover we set for the container will work only when hovering this child*/
  pointer-events:auto;
  cursor:pointer;
}

div{
  border:2px solid grey;
  margin:20px 40px;
  text-align:center;
}

＆＃13;

但这可能不是那么常见的情况，在这一点上，你可以通过JS方法做得更好。

将鼠标悬停在div上影响外部元素

1 个答案: