Question

我的父母有红色边框。当用户在儿童上盘旋时，我试图改变孩子的边框以与父母重叠。我怎样才能做到这一点？

＆＃13;

     public function check(Request $request, $name, $no)
  {

    $count=0; 
    $input=$request->all();
    $mycheck=$input['mycheck'];
    $eman=$input['name'];

        $stmt = quiz::where('category',$name)->where('level',$no)->get();
        $array=['category'=>$name,'level'=>$no];            
        $cat = quiz::where($array)->first();  

    foreach ($stmt as $c)
    {

         if(array_key_exists($c->qid, $mycheck) && $mycheck[$c->qid]==$c->answer)
            {
                $count=$count+1;
        }
    }

        $imageName = $request->file('image')->getClientOriginalExtension();

        $request->file('image')->move(
        base_path() . '/public/images/', $imageName);


   $addscore= Result::insert(['Name'=>$eman,'Score'=>$count,'Level'=>$no,'Category'=> $name,'Image'=>$imageName]);

        return View('quiz.check',['stmt'=>$stmt,'input'=>$input,'count'=>$count,'eman'=> $eman,'cat'=>$cat,'mycheck'=>$mycheck,'addscore'=>$addscore]);  

 }

＆＃13;

.parent{
  border:1px solid red;
  display:inline-block;
}

.parent a {
  display:block;
  padding:1em;
  border-bottom:1px solid #ddd;
}

.parent a:hover{
  border:1px solid #ddd;
}

＆＃13;

Answer 1

我对你的风格做了一些改变：

.parent{
  display:inline-block;
}

.parent a {
  display:block;
  padding:1em;
  border-right:1px solid red;
  border-left:1px solid red;
  border-bottom:1px solid #ddd;
  border-top: none;
}

.parent a:first-of-type{
  border-top:1px solid red;
}

.parent a:last-of-type{
  border-bottom:1px solid red;
}

.parent a:hover{
  border-color:#ddd;
}

在此处查看结果https://jsfiddle.net/IA7medd/343ydvhs/

Answer 2

只要您知道边框的宽度并且能够使用相对定位......为了清晰起见，我在这里夸大了边框。

.parent {
  border:5px solid red;
  display:inline-block;
  position: relative;
}

.parent a {
  display:block;
  padding:1em;
  border-bottom:1px solid #ddd;
  position: relative;
}

.parent a:hover{
  border:5px solid #ddd;
  margin: -5px;
}

https://jsfiddle.net/kd0gf31z/

Answer 3

你可以通过使用绝对定位的伪元素来实现这一点，如下所示：

*,*::before,*::after{box-sizing:border-box;font-family:sans-serif;}
.parent{
    border:1px solid red;
    display:inline-block;
}
.parent a{
    display:block;
    padding:1em;
    border-bottom:1px solid #ddd;
    position:relative;
}
.parent a:last-child{
    border:0;
}
.parent a:hover::after{
    border:1px solid #ddd;
    bottom:-1px;
    content:"";
    left:-1px;
    position:absolute;
    right:-1px;
    top:-1px;
}

<div class="parent">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
</div>

Answer 4

.parent a:hover{
  border:1px solid #ddd;
  width:120%;
}

https://jsfiddle.net/9Lmwp0e7/

这样的东西？

Answer 5

为什么不改变子悬停上的父CSS？

@Override
    public Identifier determineJoinColumnName(ImplicitJoinColumnNameSource source) {
        final String name;

        if ( source.getNature() == ImplicitJoinColumnNameSource.Nature.ELEMENT_COLLECTION
                || source.getAttributePath() == null ) {
            name = transformEntityName( source.getEntityNaming() )
                    + '_'
                    + source.getReferencedColumnName();
        }
        else {
            name = transformAttributePathCustom(source.getAttributePath())
                    + '_'
                    + source.getReferencedColumnName();
        }

        return toIdentifier( name, source.getBuildingContext() );
    }

在悬停时如何让我的孩子边框与父边框重叠？

5 个答案: