0
我有一個昨天不存在的神祕問題（你知道那些？）。出於某種原因，這些灰色框出現在用戶懸停在其父元素上時出現的元素邊緣。他們看起來在右邊和底部。基本上，檢查和x圖像下的所有東西都是一個.bottom類的div。我已經設置爲父高度的50%和其寬度的100%。這些是反應組分，所以可能很難遵循。 EventDetail組件嵌套在Event組件中。如何在div元素的邊緣擺脫這些神祕的灰色框？
.eventcontainer {
\t padding: 5px;
\t width: 960px;
\t margin: 20px auto;
}
.event {
margin-top: 2%;
width: 960px;
border-color:#496DD9;
border-style: dotted;
font-size: 0.5em;
height: 300px;
position: relative;
-webkit-transition: height 300ms ease-out;
}
.event:hover {
height: 400px;
-webkit-transition: height 300ms ease-in;
}
.event:hover .hidden {
display: block;
opacity: 1;
-webkit-transition: opacity 300ms ease-in 200ms;
}
.hidden {
opacity: 0;
overflow: scroll;
-webkit-transition: opacity 100ms ease-out;
}
.bottom {
position: absolute;
bottom: 0;
padding-bottom: 2%;
padding-left: 2%;
font-size: 13px;
width: 100%;
height: 50%;
}const EventDetail = (props) => {
const options = {
color: '#DE5745',
trailWidth: 1,
strokeWidth: 10,
};
const containerStyle = {
width: '100px',
height: '20px',
};
const showUpdate = (e) => {
e.preventDefault();
props.dispatch(renderUpdate(props.id));
};
return (
<div className=" bottom hidden" >
<p>Attendance</p>
<div className="progressbar">
<Line progress={(props.attending/props.capacity)} containerStyle={containerStyle} initialAnimate options={options} containerClassName={'.progressbar'} />
<span>{props.attending}</span><span>/</span><span> {props.capacity}</span>
</div>
{/* <div>{props.attendeeHelperFunction(props.attendeeList)}</div>*/}
<p>Description:</p>
{props.description === '___' ? <p>The owner did not provide a description. So mysterious</p> : <p>{props.description}</p>}
{window.localStorage.getItem('userid') === props.owner_id ?
<div>
<Update
event_title={props.title}
event_description={props.description}
event_capacity={props.capacity}
event_id={props.event_id}
/>
</div>
: null}
</div>
);
};const Event = (props) => {
const attendHandler = (e) => {
e.preventDefault();
props.dispatch(attendEvent(props.id))
.then(() => {
props.dispatch(fetchEvents());
});
};
const flakeHandler = (e) => {
e.preventDefault();
props.dispatch(flakeEvent(props.id))
.then(() => {
props.dispatch(fetchEvents());
})
.catch(err => console.log(err));
};
return (
<div className="event">
<section className="eventdescription">
<p>{props.title}</p>
<p>{props.date}</p>
<p>Hosted by: {props.owner}</p>
<p>{console.log('EVENT', renderEvents)}</p>
</section>
<section className="attend"><img onClick={attendHandler}className="eventgraphic" src={check} alt="" /></section>
<section className="unattend"><img onClick={flakeHandler}className="eventgraphic" src={crossout} alt="" /></section>
<EventDetail
title={props.title}
event_id={props.id}
owner_id={props.owner_id}
attending={props.attendees}
capacity={props.capacity}
description={props.description}
attendeeList={props.attendeeList}
attendeeHelperFunction={props.attendeeHelperFunction}
/>
</div>
);
};